如何重新创建Fabric.js画布？

Question

I have a site where users can move images around in a Fabric.js canvas. I want to be able to recreate their "design" in a bigger canvas, so my question is; what different ways are there to recreate a canvas using the variables from the original?

Right now im using JSON.stringify(canvas); to get back the data, but its not really ideal since i then have to copy paste the variables again, it looks like this: type":"image","originX":"center","originY":"center","left":135,"top":259," . Any suggestions on how to do this or is JSON.stringify(canvas); and then copy pasting all the data the simplest?

Answer 1

Use the canvas.toJSON() method to create a json object of your first canvas's objects and properties, then load that json object into your new canvas using the

canvas.loadFromJSON("your json object"); method.

Once you have loaded the object into your canvas with the above method, call canvas.renderAll(); and you should see the new canvas contains all the objects from the original.

You may optionally choose which properties to store in your json object by passing an array of property names to the toJSON() method, documentation can be found here :

http://fabricjs.com/docs/fabric.Canvas.html#toJSON