Search code examples
jqueryfabricjs

Fabric js, how to save data

How to save added object in canvas via jquery? with all attributes

{
   translate: '';
   x: '';
   y: ''; 
   style: ''; 
   width: ''; 
   height: ''; 
   xlink href: ''; 
   preserveAspectRatio: '';
}
Solution

  • jQuery will not help you to do this.

    When you start to use fabric you can call .toObject() on either the whole fabric canvas object to get the full state of the fabric canvas, or you can call .toObject() on any one fabric object to just get the data from that object.

    If you have the data for a whole canvas and want to replace an existing canvas or start new one you can use the .loadFromJSON(yourDataHere) on the fabric canvas object.

    If you just have data for a single object you would like to add to an existing canvas you can add it with the fabric.util.enlivenObjects(arrayOfObjectData, callbackFunction) which wants an array of the data you go from each object to be passed in followed by a callback function which will be passed the recreated objects that you can then add to any fabric canvas.