如何將畫布背景圖像另存爲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>

^{上面的代碼，是相當多的自我解釋。即使在此之後，如果您有任何疑問，請讓我知道。}