使用图像对象序列化和反序列化画布 (Fabricjs)答案

【问题标题】：Serialize and Deserialize canvas with image objects (Fabricjs)使用图像对象序列化和反序列化画布 (Fabricjs)
【发布时间】：2015-08-23 10:44:56
【问题描述】：

我正在使用 fabric.js 将图像对象添加到画布。序列化工作正常，但反序列化后画布对象为空。 console.log(JSON.stringify(canvas)) 返回：{"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 进行反序列化，但没有结果。那么，我做错了什么？

【问题讨论】：

标签： javascript fabricjs

【解决方案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));
});

【讨论】：

不幸的是没有任何改变，反序列化后画布仍然是空的。
你是对的。 console.log(JSON.stringify(canvas)) 返回空字符串，因为它必须写在“loadFromJSON”的回调函数中，如下所示： canvas.loadFromJSON(serialized, function () { canvas.renderAll(); console.log(JSON .stringify(canvas)); });

【解决方案2】：

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

我没有遵循您试图实现的目标，因为您清除画布只是为了将相同的内容添加回其中，因此不确定如何提供替代选项。

【讨论】：

我删除了 canvas.clear()，创建了新的画布并尝试了 newcanvas.loadFromJSON(serialized)，但没有任何改变。然后我删除了添加图像 obj 并添加了三角形，它的序列化和反序列化都很好。好像我在用图像对象序列化和反序列化画布时遇到问题。