使用图像对象序列化和反序列化 canvas (Fabricjs)

Question

我正在使用 fabric.js 将图像对象添加到 canvas。序列化工作正常，但反序列化后 canvas 对象为空。 console.log(JSON.stringify(canvas)) returns: {"objects":[],"background":""}

这是我的代码：

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 canvas 在接收图像之前，您应该将该代码移动到图像加载回调中：

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

变量序列化成为对对象canvas的引用。当您调用 canvas.clear() 时，您清空了 canvas，因此您序列化的变量（引用 canvas）也变为空。

我没有理解你试图实现的目标，因为你清除 canvas 只是为了将相同的内容添加回它，所以不确定如何提供替代选项。

使用图像对象序列化和反序列化 canvas (Fabricjs)

Serialize and Deserialize canvas with image objects (Fabricjs)

javascript

fabricjs