Fabric.js - how to save canvas on server with custom attributes

Question

I'd like to be able to save the current canvas' state to a server-side database, probably as a JSON string, and then later restore it with loadFromJSON. Typically, this is easily accomplished using:

var canvas = new fabric.Canvas();
function saveCanvas() {
    // convert canvas to a json string
    var json = JSON.stringify( canvas.toJSON() );

    // save via xhr
    $.post('/save', { json : json }, function(resp){ 
        // do whatever ...
    }, 'json');
}

And then

function loadCanvas(json) {

  // parse the data into the canvas
  canvas.loadFromJSON(json);

  // re-render the canvas
  canvas.renderAll();

  // optional
  canvas.calculateOffset();
}

However, I've also been setting a few custom attributes on the fabric objects I'm adding to the canvas using the builtin Object#set method:

// get some item from the canvas
var item = canvas.item(0);

// add misc properties
item.set('wizard', 'gandalf');
item.set('hobbit', 'samwise');

// save current state
saveCanvas();

The problem is that when I check the request on the server-side, I see that my custom attributes were not parsed from the canvas and sent along with everything else. This probably has to do with how toObject method removes anything that's not a default attribute in the object class. What would be a good way to tackle this issue, such that I'll be able to both save and restore the canvas from a JSON string sent by the server, and the restored canvas will also include my custom attributes? thanks.

Answer 1

Good question.

If you're adding custom properties to objects, those objects are likely "special" in some way. It seems like subclassing them would be a reasonable solution.

For example, here's how we would subclass a fabric.Image into a named image. Those image objects could then have names like "Gandalf" or "Samwise".

fabric.NamedImage = fabric.util.createClass(fabric.Image, {

  type: 'named-image',

  initialize: function(element, options) {
    this.callSuper('initialize', element, options);
    options && this.set('name', options.name);
  },

  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'), { name: this.name });
  }
});

First, we give these objects a type. This type is used by loadFromJSON to automatically invoke fabric.<type>.fromObject method. In this case it would be fabric.NamedImage.fromObject.

Then we overwrite initialize (constructor) instance method, to also set "name" property when initializing an object (if that property is given).

Then we overwrite toObject instance method to include "name" in returned object (this is a cornerstone of object serialization in fabric).

Finally, we'll also need to implement that fabric.NamedImage.fromObject that I mentioned earlier, so that loadFromJSON would know which method to invoke during JSON parsing:

fabric.NamedImage.fromObject = function(object, callback) {
  fabric.util.loadImage(object.src, function(img) {
    callback && callback(new fabric.NamedImage(img, object));
  });
};

We're loading an image here (from "object.src"), then creating an instance of fabric.NamedImage out of it. Note how at that point, constructor will already take care of "name" setting, since we overwrote "initialize" method earlier.

And we'll also need to specify that fabric.NamedImage is an asynchronous "class", meanining that its fromObject does not return an instance, but passes it to a callback:

fabric.NamedImage.async = true;

And now we can try this all out:

// create image element
var img = document.createElement('img');
img.src = 'https://www.google.com/images/srpr/logo3w.png';

// create an instance of named image
var namedImg = new fabric.NamedImage(img, { name: 'foobar' });

// add it to canvas
canvas.add(namedImg);

// save json
var json = JSON.stringify(canvas);

// clear canvas
canvas.clear();

// and load everything from the same json
canvas.loadFromJSON(json, function() {

  // making sure to render canvas at the end
  canvas.renderAll();

  // and checking if object's "name" is preserved
  console.log(canvas.item(0).name);
});