本文介绍了在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中包含图像数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！