Question

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

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（function（b）{）

if（h.open（b.type，b.url，b.async，b.username，b.password），

Answer 1

不!! 你真的不需要两幅画布。一个画布就足以实现这一目标。

这个想法非常简单。

仅将背景图片保存为JSON：

从画布中删除*所有对象，背景图像除外
将画布另存为JSON字符串
将所有对象添加回画布

仅将对象保存为JSON：

从画布中删除背景图片
将画布保存为JSON字符串
将背景图片添加回画布

删除之前

_{*存储，以便稍后添加}

在这里，我创建了一个虚拟示例，描述了实际的想法：

＆＃13;

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
}

＆＃13;

canvas { border: 1px solid black }

＆＃13;

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

＆＃13;

^{上面的代码，几乎是自我解释的。即使在那之后，如果您有任何理解上的麻烦，请告诉我。}

如何将画布背景图像与其他对象分开保存到Json

1 个答案: