使用loadFromJSON（）方法加载对象后处理画布

Question

我想将一个画布的内容复制到另一个画布然后处理第二个画布并将画布保存为png图像，但是当我复制到第二个画布时，图像没有显示在使用{{1}导出的png中}} 方法。所有图像都位于同一服务器中，这些图像在画布中可见，但在导出的图像中不可见。 为什么会这样？

代码已更新：

canvas.toDataURL("png")

除了画布中的图像之外的所有项目都会导出，并且可以在新窗口中看到，

感谢您的帮助。

Answer 1

将json加载到画布后，您必须在canvas.renderAll()的回调中调用canvas.loadFromJSON - 以及所有其他内容。

copyCanvas.loadFromJSON(case_canvas.toJSON(), function() {
  copyCanvas.renderAll();
  copyCanvas.calcOffset();
  console.log(copyCanvas.toJSON());
  window.open(copyCanvas.toDataURL("png"));
});

在加载所有对象（包括图像）后引发回调。 fabric.Image对象是异步的 - 这就是图像对象丢失的原因。