在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))
  }
});