如何在Javascript中将缩放和平移的画布保存到dataUrl

我构建了一个画布元素，在其中可以缩放和平移背景图像，通过单击可以在其上添加图标。它构建在fabric js上

因此，一旦我添加了图标并缩放和平移，我想将图像保存到dataurl。如果我只使用canvas.toDataURL，我只能看到当前显示的区域。有没有人有什么想法，我如何用画布上的所有元素保存背景图像的整个区域？因此，我需要一个函数，它重置缩放和平移，并将画布的大小调整为背景图像的大小

下面我举了一个初始化画布的例子

//新建结构画布
var canvas=newfabric.canvas（'c'）//将图像渲染到此画布
addEventListener（'resize'，resizeCanvas，false）；
函数resizeCanvas（）{
canvas.setHeight（window.innerHeight）；
canvas.setWidth（window.innerWidth）；
canvas.renderAll（）；
}
//在初始化时调整大小
调整画布的大小（）；
//加载图像
var image=新图像（）；
image.onload=函数（）{
loadImage（图像、画布）；
canvas.height=image.height；
canvas.width=image.width；
}
函数loadImage（图像，canv）{
var img=新结构。图像（图像{
可选：false，
lockUniScaling：没错，
centeredScaling：正确，
alignX:“中”，
阿利尼：“中”，
});
可以添加（img）；
canv.centerObject（img）；
}
image.src=http://placehold.it/350x150';
如果只想生成图像而不更改画布的缩放级别，可以将乘数参数传递给toDataUrl函数

var dataURL = canvas.toDataURL({
  format: 'png',
  multiplier: 2
});

这将在放大200%后生成图像

您甚至可以指定画布的一部分，您希望使用以下方法生成的图像：

var dataURL = canvas.toDataURL({
  format: 'png',
  left: 100,
  top: 100,
  width: 200,
  height: 200
});

检查此处的详细信息，toDataUrl函数：