Fabric.js能否加载含不同图片源的JSON并替换证件内容？

当然可以修改图片源这类实际内容啦！你已经走对了方向——在loadFromJSON的回调里操作画布对象，不仅能调整尺寸位置，还能轻松替换图片地址、更新文本内容。下面给你具体的实现方案：

1. 给动态对象添加唯一标识 #

在最初设计证件模板时，给需要替换的元素（员工头像、姓名、地址等）添加自定义标识（比如id），这样后续加载JSON后能精准定位到它们：

// 示例：创建员工姓名文本时添加标识
const defaultNameText = new fabric.Text('默认姓名', {
  id: 'employee-name', // 自定义唯一标识
  left: 150,
  top: 220,
  fontSize: 24,
  fill: '#333'
});
canvas.add(defaultNameText);

// 示例：创建默认头像时添加标识
fabric.Image.fromURL('default-avatar.jpg', function(img) {
  img.set({
    id: 'employee-avatar', // 自定义唯一标识
    left: 60,
    top: 80,
    width: 120,
    height: 150,
    lockScalingX: true,
    lockScalingY: true
  });
  canvas.add(img);
});

Fabric.js会自动把这些自定义属性保存到JSON中，加载时就能读取到。

2. 加载JSON后替换员工信息 #

在loadFromJSON的回调里，遍历画布对象，通过标识找到目标元素并替换内容：

// 假设从数据库获取的选中员工数据如下
const selectedEmployee = {
  name: '张三',
  avatarUrl: 'zhangsan-avatar.jpg',
  address: '上海市浦东新区XX街道XX号'
};

canvas_.loadFromJSON(JSON.parse(json_data), function() {
  canvas_.renderAll();
  
  // 遍历所有对象，替换对应内容
  canvas_.forEachObject(function(obj) {
    // 替换员工头像
    if (obj.id === 'employee-avatar' && obj.type === 'image') {
      // 必须用setSrc方法替换图片，它会处理图片加载后的渲染
      obj.setSrc(selectedEmployee.avatarUrl, function() {
        canvas_.renderAll();
      });
    }
    
    // 替换员工姓名
    if (obj.id === 'employee-name' && obj.type === 'text') {
      obj.set('text', selectedEmployee.name);
    }
    
    // 替换员工地址（如果有这个元素）
    if (obj.id === 'employee-address' && obj.type === 'text') {
      obj.set('text', selectedEmployee.address);
    }
  });
  
  canvas_.renderAll(); // 最后统一渲染一次
});

3. 关键注意事项 #

• 图片替换必须用setSrc：直接修改src属性不会触发图片重新加载，setSrc方法会自动处理图片加载完成后的渲染回调。
• 确保自定义标识被保存：如果发现JSON里没有自定义的id属性，在保存画布时可以显式指定要包含的属性：canvas.toJSON(['id'])。
• 绑定下拉框事件：把上述逻辑绑定到下拉框的change事件中，每次选中新员工就执行加载+替换操作即可。

这样就能实现选择员工后，画布自动更新为对应员工的证件信息啦！

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