Question

我使用fabric.js将图像对象添加到画布。序列化工作正常，但反序列化后canvas对象为空。 console.log（JSON.stringify（canvas））返回：{＆＃34; objects＆＃34;：[]，＆＃34; background＆＃34;：＆＃34;＆＃34;}

这是我的代码：

var canvas = new fabric.Canvas('goCanvas');

fabric.Image.fromURL("rooryteam03da088a.jpeg", function(oImg) {
        canvas.add(oImg);
});

var serialized = JSON.stringify(canvas);

canvas.clear();

canvas.loadFromDatalessJSON(serialized);

console.log(JSON.stringify(canvas));

我还尝试使用loadFromJSON而不是loadFromDatalessJSON进行反序列化，但没有结果。那么，我做错了什么？

Answer 1

fabric.Image.fromURL是异步的。在接收图像之前 stringify 画布，您应该将该代码移动到图像加载回调：

var canvas = new fabric.Canvas('goCanvas');

fabric.Image.fromURL("rooryteam03da088a.jpeg", function(oImg) {
  canvas.add(oImg);

  var serialized = JSON.stringify(canvas);
  canvas.clear();
  canvas.loadFromDatalessJSON(serialized);
  console.log(JSON.stringify(canvas));
});

Answer 2

变量serialized成为对象画布的引用。当你调用canvas.clear（）时，你会清空画布，因此你引用canvas的变量序列化变为空。

我没有关注你试图实现的目标，因为你只是为了将相同的内容添加回来而清除画布，所以不确定如何提供备用选项。

使用图像对象（Fabricjs）序列化和反序列化画布

2 个答案: