javascript - How to save canvas background image to Json separately from other objects -

i want save objects on canvas , image under other objects db. , can objects on canvas:

var jsontophp= json.stringify(canvas.toobject(['id','name','selectable'])); 

but when want use 2 json variables; 1 background image: , other other objects on canvas.... in big trouble.

i have 2 columns in db. want send background image 1 , other objects other column. might edit background when wish.

i trying different solutions 10 days now. , .... can not find way. have lot of code, and.... better, if start nothing.

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

error server ( r.ajaxtransport(function(b) {)

if (h.open(b.type, b.url, b.async, b.username, b.password),

no!! don't need 2 canvases. 1 canvas enough achieve this.

the idea quite simple.

saving background image json :

• remove* objects canvas, except background image
• save canvas json string
• add objects canvas

saving objects json :

• remove background image canvas

• save canvas json string

• add background image canvas

_{* store before removing, can add them later}

here have created dummy example portrays idea in action :

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 objects, on canvas     var clonedobjects = [];     while (objects.length !== 0) {        clonedobjects.push(objects[0].clone()); //clone objects, 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>

^{the code above, pretty self explanatory. after that, if have trouble understanding, please let me know.}