从画布中排除元素以保存到json（fabric.js） [英] Exclude element from canvas to be saved to json (fabric.js)

问题描述

我正在使用

  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（{格式：'png'，质量：0.8}）; 
}）;}; reader.readAsDataURL（file）; 
 
}）; 
  

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

我输入搜索：

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

我还有下一个：

fabricjs docs Object类的属性为
'exlevFromExport'。

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

www.fabricjs.com/docs

我去了：

来源：fabric.js，第12350行excludeFromExport

现在怎么办？

我的知识要少于此。有没有人可以提供更多信息：可能是一个例子？

谢谢

解决方案

DEMO

  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'，qual ity：0.8}）; }）; }; reader.readAsDataURL（file）;}）; var canvas = new fabric.Canvas（'c'，{serializeBgOverlay：false //将背景数据序列化为json}）; canvas.backgroundColor ='green'; canvas.add（new fabric .Circle（{left：50，top：50，radius：50，stroke：'red'，fill：''}））canvas.renderAll（）; //覆盖_toObjectMethod，如果你想序列化背景，设置serializeBgOverlay为true ，canvas canvas initializefabric.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）;返回数据;}函数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 =fileid =imgLoaderaccept =image / *> < br>< canvas id ='c'width ='400'height ='400'>< / canvas>< button onclick ='exportToJson（）;'> ToJson< / button>  

这里我添加了一个原型 _toObjectMethod（），它将排除canvas toJson export的背景图片。

I am using

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

to save all from canvas to JSON.

I am also adding background image to 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);

});

But i would like to exclude background image to be saved to JASON.

I vas googling for:

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

and i have got next:

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

I went to:

Source: fabric.js, line 12350 excludeFromExport

And what now?

My knowlage is to less to get to result from this. Does any one can give more informations: maybe one example?

Thank you

解决方案

DEMO

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>

Here I added a prototype of _toObjectMethod() , it will exclude background image of canvas toJson export.

这篇关于从画布中排除元素以保存到json（fabric.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！