Fabric.js fromObject API使用问题：跨画布导入对象不显示解决方案

我刚好遇到过类似的问题，你的代码里其实只差一步——把反序列化出来的Group添加到目标画布！让我帮你分析并解决：

问题根源 #

你调用fabric.Group.fromObject()成功创建了新的Group实例，但只执行了canvas_template.setActiveObject(obj)，却没有将这个实例添加到目标画布的对象列表中。Fabric.js只会渲染已经通过add()方法加入画布的对象，所以才会出现“对象创建成功但不显示”的情况。

修复后的代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.min.js"></script>
<canvas id="canvas" style="border: 1px solid black" height=480 width=460></canvas>
<button id="btn">导出</button>
<canvas id="canvas_template" style="border: 1px solid black; margin-top: 20px" height=480 width=660></canvas>

<script>
var canvas = new fabric.Canvas('canvas');
var canvas_template = new fabric.Canvas('canvas_template');
var circle = new fabric.Circle({ radius: 50, left: 275, top: 75, fill: '#aac' })
var triangle = new fabric.Triangle({ width: 100, height: 100, left: 50, top: 300, fill: '#cca' });
var rect1 = new fabric.Rect({ width: 200, height: 100, left: 0, top: 50, angle: 30, fill: 'rgba(255,0,0,0.5)' });
var group = new fabric.Group([circle, triangle, rect1])
canvas.add(group).setActiveObject(group);
canvas.renderAll();

document.querySelector('#btn').addEventListener('click',function() {
  // 导出Group的完整数据，确保包含子对象
  var data = group.toObject(['objects']);
  
  fabric.Group.fromObject(data, function(newGroup) {
    // 关键步骤：将新Group添加到目标画布
    canvas_template.add(newGroup);
    // 可选：设置为激活对象
    canvas_template.setActiveObject(newGroup);
    // 重新渲染画布
    canvas_template.renderAll();
  });
})
</script>

关键改动说明 #

1. 添加对象到画布：新增canvas_template.add(newGroup)，这是让对象显示的核心操作，没有这一步，画布不会渲染任何未注册的对象。
2. 完整序列化Group：调用group.toObject(['objects'])明确指定包含子对象数组，确保序列化的数据包含Group的所有子元素信息，避免反序列化时丢失内容。
3. 简化回调逻辑：去掉了多余的空Group创建，直接使用fromObject回调返回的实例即可。

替代实现方案（适用于多对象导入） #

如果需要导入多个对象，或者想合并目标画布的原有数据，可以采用“合并JSON数据”的方式：

document.querySelector('#btn').addEventListener('click',function() {
  // 导出源画布的目标对象JSON
  const sourceJson = group.toJSON();
  // 获取目标画布现有数据
  const targetJson = canvas_template.toJSON();
  
  // 合并对象数组（将源对象添加到目标对象列表末尾）
  targetJson.objects.push(sourceJson);
  
  // 加载合并后的JSON，第二个参数是加载完成后的回调
  canvas_template.loadFromJSON(targetJson, function() {
    canvas_template.renderAll();
  });
})

这个方案的好处是可以灵活合并多个对象，同时保留目标画布的原有内容，适合更复杂的导入场景。

内容的提问来源于stack exchange，提问作者bin lai