Save canvas to image with all its object and back to canvas with all objects back for editing them

Question

I am using fabrics JS for adding objects on canvas and then saving it in form of image. Now i want bring the image back to edit mode inside canvas.

You can get detailed idea about it at http://www.13thandmars.com/logo_studio/builder.html?project_id=17b36372c43c04044dd804454dfdf6e8

Add text will add an object to tshirt in above link.

Answer 1

You can save canvas as JSON and then can load it back from JSON

var myJson = JSON.stringify(canvas.toJSON(['left', 'top', 'lockMovementX', 'lockMovementY']));
canvas.loadFromJSON(myJson, function () {
    //render the canvas
    canvas.renderAll();
});

Answer 2

if i am not mistaken you say that the font property is missing?

if this is you problem please take a look , fabric DOES NOT convert all the object properties to Json when you convert the canvas with canvas.toJSON() , so when you are going to get back your canvas , the objects will not be complete (your custom properties will missing),

for example : myObj.material , myObj.size, myObj.clotheType etc.

you have to say to the prototype toObject function which properties you want to be converted also with canvas.toJSON(), in your code, the following is a snippet of my code:

        fabric.Object.prototype.toObject = (function(toObject) {
            return function() {
                return fabric.util.object.extend(toObject.call(this), {
                    objectId: this.objectId,//my custom property
                    _controlsVisibility:this._getControlsVisibility(),//i want to keep controlsVisibility for my reasons
                    typeTable:this.typeTable,//my custom property
                    txtType:this.txtType, //my custom property
                    customOptions:this.customOptions//my custom object property
                });
            };

i hope that helps.