javascript - 从 Canvas 中排除元素以保存到 json (fabric.js)

Question

我正在使用

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

将 Canvas 中的所有内容保存到 JSON。

我还在 Canvas 上添加背景图片。

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 的背景图像。

我在谷歌上搜索:

Exclude element from canvas to be saved to json fabric.js

我有下一个:

in the fabricjs docs there is a property for the Object class calles 'excludeFromExport'.

Once set to true it should do exactly what you want.

www.fabricjs.com/docs

我去了:

Source: fabric.js, line 12350 excludeFromExport

现在怎么办？

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

谢谢

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()的原型(prototype)，它将排除 Canvas 的背景图像toJson导出。