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()的reviver来获取对象，然后使用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))
  }
});

是否有可能在fabric.js中加载具有不同图像源的json。

1 个答案: