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 fabric.js

我接下来了：

在fabricjs文档中，有一个Object类calles的属性   'excludeFromExport'。

一旦设置为true，它应该完全符合您的要求。

www.fabricjs.com/docs

我去了：

来源：fabric.js，第12350行excludeFromExport

现在怎么办？

我的知识是为了减少这一点。是否有人可以提供更多信息：也许是一个例子？

谢谢

Answer 1

<强>样本

＆＃13;

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());
}

＆＃13;

canvas{
 border:2px dotted blue;
}

＆＃13;

<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>

＆＃13;

这里我添加了_toObjectMethod()的原型，它将排除canvas到json导出的背景图片。

从画布中排除元素以保存到json（fabric.js）

1 个答案: