在JSON FabricJS中包含图像数据 [英] Include Image Data in JSON FabricJS

问题描述

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

我尝试过同时使用new fabric.Image和fabric.Image.fromURL加载图像，它们都工作得很好。

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

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

我已经收集了我目前所拥有的一小部分<3-0]>。请注意，当您单击导出并在控制台上看到时，两个对象都有源链接，并且它们都没有实际的Base64数据。

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

我试着在互联网上搜索，根据文档，JSON应该包含，但看起来只针对形状，而不是图像。还是我错过了什么？

提前谢谢！

推荐答案

扩展为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()

演示

数据-lang="js"数据-隐藏="真"数据-控制台="假"数据-巴贝尔="假">

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>

这篇关于在JSON FabricJS中包含图像数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！