从画布中排除要保存到 json (结构.js) 的元素

Question

我正在使用

var jsonToPHP= JSON.stringify(canvas.toObject(['id','name']));

以将所有内容从画布保存到 JSON。

我还在画布上添加背景图像。

document.getElementById('imgLoader').addEventListener("change", function (e) {   var file = e.target.files[0];   var reader = new FileReader();   reader.onload = function (f) {
var data = f.target.result;                    
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 0, top: 0, angle: 00,width:canvas.width, height:canvas.height,}).scale(1);
oImg.set('selectable', false);
canvas.add(oImg).renderAll();
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});   };   reader.readAsDataURL(file);
});

但我想排除要保存到 JASON 的背景图像。

我在谷歌上搜索：

从画布中排除要保存到 json 结构的元素.js

我有下一个：

在fabricJS文档中，有一个用于对象类调用的属性 "排除导出"。

一旦设置为 true，它应该完全按照你想要的去做。

www.fabricjs.com/docs

我去了：

来源：织物.js，第 12350 行不包括出口

现在呢？

我的知识是少从中得到结果。有没有人可以提供更多信息：也许是一个例子？

谢谢

Answer 1

演示

document.getElementById('imgLoader').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 0,
top: 0,
angle: 00,
width: canvas.width,
height: canvas.height
});
canvas.setBackgroundImage(oImg).renderAll();
var dataURL = canvas.toDataURL({
format: 'png',
quality: 0.8
});
});
};
reader.readAsDataURL(file);
});
var canvas = new fabric.Canvas('c', {
serializeBgOverlay: false //to serialize background data toJson
});
canvas.backgroundColor = 'green';
canvas.add(new fabric.Circle({
left: 50,
top: 50,
radius: 50,
stroke: 'red',
fill: ''
}))
canvas.renderAll();
// override _toObjectMethod and if you want to serialize background , set serializeBgOverlay true, while canvas initialize
fabric.StaticCanvas.prototype._toObjectMethod = function(methodName, propertiesToInclude) {
var data = {
objects: this._toObjects(methodName, propertiesToInclude)
};
if (this.serializeBgOverlay) {
fabric.util.object.extend(data, this.__serializeBgOverlay(methodName, propertiesToInclude));
}
fabric.util.populateWithProperties(this, data, propertiesToInclude);
return data;
}
function exportToJson() {
console.log(canvas.toJSON());
}

canvas{
border:2px dotted blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<input type="file" id="imgLoader" accept="image/*"> <br>
<canvas id='c' width='400' height='400'></canvas>
<button onclick='exportToJson();'>ToJson</button>

这里我添加了一个_toObjectMethod()的原型，它会排除canvas toJson导出的背景图片。