在 JSON FabricJS 中包含图像数据答案

【问题标题】：Include Image Data in JSON FabricJS在 JSON FabricJS 中包含图像数据
【发布时间】：2018-12-28 06:33:38
【问题描述】：

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

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

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

如何导出到 JSON，其中包含 JSON 上的图像数据？（我已经得到了链接）

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

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

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

提前致谢！

【问题讨论】：

标签： javascript json fabricjs

【解决方案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>

【讨论】：

这个确实有效，但它破坏了 toDatalessJSON，基本上它向两种方法都添加了数据，这不是我想要的，toDatalessJSON 应该有图像链接，toJSON 应该有所有数据。
我需要包含自定义属性，将参数添加到function() -> function(propertiesToInclude) 并将参数添加到“调用”：toObject.call(this, propertiesToInclude)
您好，谢谢它的工作，但有没有办法我们可以从 base64 字符串中删除方向细节
我在加载 json 时遇到问题，图像旋转了两次，对象位置和其他实际图像（base64）

【解决方案2】：

你需要扩展fabric.Image.protype.toObject():

fabric.Image.prototype.toObject = (function (toObject) {

    return function () {
        var image = this;

        var getData = function () {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;

            context = canvas.getContext('2d');

            context.drawImage(image.getElement(), 0, 0);

            return canvas.toDataURL('image/png').replace(/^data:image\/png;base64,/, '');
        };

        return fabric.util.object.extend(toObject.call(this), {
            dataURL: getData(),
        });
    };
})(fabric.Image.prototype.toObject);

之后，dataURL 属性将自动添加到您的对象中。

【讨论】：