Fabric.js对象序列化与反序列化失效问题求助

你直接用JSON.stringify()处理Fabric对象的方式不对——这种方式会把对象的所有内部属性、私有状态都序列化进去，不仅冗余，而且反序列化后得到的只是普通JavaScript对象，不是Fabric的Line实例，所以调用myCanvas.add()时必然报错。

Fabric.js内置了专门的序列化和反序列化方法，能精准处理对象数据，保证还原后的实例和原对象一致：

• 序列化：使用Fabric对象的toJSON()方法，自动过滤内部冗余数据，只保留重建对象所需的核心配置。
• 反序列化：使用对应类的fromObject()方法（单个对象）或fabric.util.enlivenObjects()（批量处理），把JSON数据转回可直接使用的Fabric实例。

修正后的完整代码 #

<canvas id="demoCanvas"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.0/fabric.min.js"></script>
<script type="text/javascript">
const myCanvas = new fabric.Canvas("demoCanvas", {
  backgroundColor: "beige",
});
const line = new fabric.Line([50, 100, 200, 100],{
    left: 160,
    top: 70,
    strokeWidth: 8,
    stroke: "#000", // 原代码stroke设为8是错误的，需改为颜色值
    padding: 12,
    angle: 90,
    //flipY: true,
    rotatingPointOffset: 92,
  });

// 正确序列化：仅保留必要配置
const lineJson = line.toJSON();
console.log("序列化后的JSON", lineJson);

// 正确反序列化：转回Fabric Line实例
fabric.Line.fromObject(lineJson, function(newLine) {
  console.log("还原后的Line实例", newLine);
  myCanvas.add(newLine);
  myCanvas.setActiveObject(newLine);
});
</script>

批量处理画布对象的方案 #

如果需要序列化整个画布的所有对象并还原，可以用以下方式：

// 序列化画布所有对象
const canvasJson = myCanvas.toJSON();
// 反序列化并添加回画布
fabric.util.enlivenObjects(canvasJson.objects, function(enlivenedObjects) {
  enlivenedObjects.forEach(obj => myCanvas.add(obj));
});

内容的提问来源于stack exchange，提问作者Jeremy Faucher