如何将画布背景图像另存为Json

Question

我想将画布上的对象和其他对象下的图像保存到数据库中。我可以做到这一点在画布上的所有对象：

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

但是，当我想使用2个json变量;一个仅用于背景图像： 和其他用于画布上的其他对象....然后我很麻烦。

我在DB中有两列。我想发送一个和所有其他对象的背景图像到其他列。所以我可能会在我希望的时候编辑背景。

我正在尝试几乎10天的不同解决方案。而且....我找不到路。我有很多代码，并且......如果我从无到有，可能会更好。从服务器

////////////// UPDATE1

function getbackgroundImageF(){ ////////////////////////////////////        JSgetBackground 
var fromSelectProject=document.getElementById("selectProject").value; 
$.ajax({ 
    method:"POST", 
    url: '/wp-content/themes/myP/PgetJson.php', 
    data: { 
    "getbackgroundImage":1, 
    "whichProject":fromSelectProject 
    }, 
    datatype: "text", 
    success: function(strdate){ 
    canvas.loadFromJSON(strdate, function() { 
    canvas.renderAll(); 
    }); 
    } 
}); 
} 
document.getElementById("getbackgroundImageID").onclick = getbackgroundImageF; 

误差（r.ajaxTransport（函数（B）{）

如果（小时。开（b.type，b.url，b.async，b.username，b.password），

Answer 1

NO !!你并不真的需要两个画布，画布之一就足以实现这个。

这个想法很简单。

仅保存背景图像JSON：

• 删除*所有从画布对象，除了背景图像
• 保存画布JSON字符串
• 添加的所有对象回到画布

仅保存对象到JSON：

• 从帆布

• 删除背景图片保存画布JSON字符串

• 移除之前添加背景图片回到画布

_{*店，所以我们可以稍后添加它们}

在这里，我已经创建了描绘操作案例虚设例如：

var canvas = new fabric.Canvas('c'); 
 
var JSONString_BGImage, JSONString_Objects; 
 

 
//add rectangles 
 
var rect1 = new fabric.Rect({ 
 
    top: 100, 
 
    left: 30, 
 
    width: 100, 
 
    height: 100, 
 
    fill: '#07C' 
 
}); 
 
var rect2 = new fabric.Rect({ 
 
    top: 100, 
 
    left: 170, 
 
    width: 100, 
 
    height: 100, 
 
    fill: '#FF0' 
 
}); 
 
canvas.add(rect1, rect2); 
 

 
//set background image 
 
canvas.setBackgroundImage('https://i.imgur.com/Q6aZlme.jpg', canvas.renderAll.bind(canvas)); 
 

 
function toJSON(only) { 
 
    if (only === 'bgImage') onlyBgImage(); 
 
    else if (only === 'objects') onlyObjects(); 
 
} 
 

 
function fromJSON(only) { 
 
    if (only === 'bgImage' && JSONString_BGImage) { 
 
     canvas.clear(); //clear canvas 
 
     canvas.loadFromJSON(JSONString_BGImage); 
 
    } else if (only === 'objects' && JSONString_Objects) { 
 
     canvas.clear(); //clear canvas 
 
     canvas.loadFromJSON(JSONString_Objects); 
 
    } 
 
} 
 

 
function onlyBgImage() { 
 
    var objects = canvas.getObjects(); //get all objects, that are on canvas 
 
    var clonedObjects = []; 
 
    while (objects.length !== 0) { 
 
     clonedObjects.push(objects[0].clone()); //clone objects, so we can add them later 
 
     canvas.remove(objects[0]); //remove objects 
 
    } 
 
    JSONString_BGImage = JSON.stringify(canvas.toJSON()); //only contains background image 
 
    canvas.add.apply(canvas, clonedObjects); //add cloned objects 
 
} 
 

 
function onlyObjects() { 
 
    canvas.backgroundImage = null; //remove background image 
 
    JSONString_Objects = JSON.stringify(canvas.toJSON()); //only contains objects 
 
    canvas.setBackgroundImage('https://i.imgur.com/Q6aZlme.jpg', canvas.renderAll.bind(canvas)); //re-add background image 
 
}

canvas { border: 1px solid black }

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script> 
 
<canvas id="c" width="300" height="300"></canvas><br> 
 
<b>Background Image : </b> 
 
<button onclick="toJSON('bgImage')">toJSON</button> 
 
<button onclick="fromJSON('bgImage')">fromJSON</button><br><br> 
 
<b>Canvas Objects : </b> 
 
<button onclick="toJSON('objects')">toJSON</button> 
 
<button onclick="fromJSON('objects')">fromJSON</button>

^{上面的代码，是相当多的自我解释。即使在此之后，如果您有任何疑问，请让我知道。}