在fabric.js中是否可以使用其他图像源加载json？

Question

我正在尝试使用fabric.js创建一个ID卡应用程序。 因此，计划是创建身份证的设计。 使用默认名称，图片，地址。 等，然后将该设计应用于其他员工。

所以到目前为止，我已经实现了1）设计部分2）将画布保存为JSON 3）重新加载画布形式json

我将从数据库中获取员工信息，并在下拉列表中显示员工姓名。 当我从下拉列表中选择员工姓名时，我希望将画布替换为员工信息...

我有一个示例，该示例从json加载画布并更改属性，例如高度，宽度等。是否可以更改实际内容本身，例如图像源

canvas_.loadFromJSON(JSON.parse(json_data), function(obj) {
  canvas_.renderAll();
  //console.log(' this is a callback. invoked when canvas is loaded!xxx ');
  canvas_.forEachObject(function(obj) {
    //console.log(obj.type);
    if (obj.type === 'image') {
      obj.set({
        left: 100,
        top: 200,
        height: 700,
        width: 700,
        scaleX: .35,
        scaleY: .35,
        lockScalingY: .35
      });
      canvas_.add(obj);
    }
  });
});

Answer 1

您可以使用loadFromJSON（）的规则来获取对象，然后使用setSrc更改图像源。

canvas.loadFromJSON(JSON.parse(json_data), canvas.renderAll.bind(canvas), function(o, object) {
  if (object.type == 'image') {
    object.setSrc(url, canvas.renderAll.bind(canvas))
  }
});