fabricjs - 使用 loadFromJSON() 方法加载对象后处理画布

Question

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

代码更新：

copyCanvas.clear();
console.log(case_canvas.toJSON());
copyCanvas.loadFromJSON(case_canvas.toJSON(), function(o, object) {
//console.log(o);
});
copyCanvas.calcOffset();
    //copyCanvas.overlayImage = null;
    //copyCanvas.renderAll();
console.log(copyCanvas.toJSON());
window.open(copyCanvas.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 对象是异步的——这就是缺少图像对象的原因。