javascript - 在 JSON FabricJS 中包含图像数据

Question

我正在尝试使用 FabricJS Canvas ，我想将 Canvas 导出为 JSON。

我已经尝试使用 new fabric.Image 和 fabric.Image.fromURL 加载图像，它们都很好用。

现在我想从 Canvas 中获取 JSON。但我想要 2 种 JSON。其中图像的 src 将链接到我最初使用的图像。另一个会简单地在 JSON 上添加 base64 数据。所以我尝试使用 canvas.toJSON() 和 canvas.toDatalessJSON()，但令我惊讶的是，它只是给出与链接相同的结果，而且它们都不包含图像数据。

如何导出到包含 JSON 图像数据的 JSON？ (我已经得到了链接)

我整理了一个小的 demo我到目前为止所拥有的。请注意，当您单击导出并在控制台上看到时，两个对象都有源链接，但实际上都没有 base64 数据。

我想要 base64 的原因是因为我希望在其他地方重新使用时立即使用它。

我尝试在互联网上搜索，根据文档，toJSON 应该包含，但看起来它只适用于形状，而不适用于图像。还是我错过了什么？

提前致谢!

Answer 1

扩展到 fabric.Image 的对象

fabric.Image.prototype.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      src: this.toDataURL()
    });
  };
})(fabric.Image.prototype.toObject);

对于 src 使用 object.toDataURL()

演示

const useFabricImage = () => {
  const c = document.getElementById("designer");
  const canvas = new fabric.Canvas(c, {width: 500, height: 500})
  const url = "https://i.imgur.com/KxijB.jpg";
  const img = new Image();
  img.src = url;
  const fabricImage = new fabric.Image(img, {});
  canvas.add(fabricImage);
  
  return canvas;
}
const useFromURL = () => {
  const c = document.getElementById("designer");
  const canvas = new fabric.Canvas(c, {width: 500, height: 500})
  const url = "https://i.imgur.com/KxijB.jpg";
  fabric.Image.fromURL(url, (img) => {
    canvas.add(img);
  },{
    crossOrigin:'annonymous'
  });
  return canvas;
}
fabric.Image.prototype.toDatalessObject = fabric.Image.prototype.toObject;

fabric.Image.prototype.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      src: this.toDataURL()
    });
  };
})(fabric.Image.prototype.toObject);


const canvas = useFromURL();

const button = document.getElementById("export");
button.addEventListener("click", () => {
  console.log(canvas.toJSON());
  console.log(canvas.toDatalessJSON());
})

#designer {
  border: 1px solid aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<canvas id="designer" height="500" width="500"></canvas>
<button id="export">Export</button>