Custom Image Object in fabric.js

Custom Image Object

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>
<button id="btnAddCustomImage">Add Custom Image</button>
<button id="btnSerializeAndClear">Serialize and Clear</button>
<button id="btnRestore">Restore</button>
<canvas id="canvas" width="400" height="400"></canvas>

JavaScript

var json;
var canvas = new fabric.Canvas("canvas");
canvas.background = "#DDDDDD";

$("#btnAddCustomImage").click(function(){
    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 });
      }
    });
    fabric.NamedImage.fromObject = function(object, callback) {
      fabric.util.loadImage(object.src, function(img) {
        callback && callback(new fabric.NamedImage(img, object));
      });
    };
    fabric.NamedImage.async = true;
    
   // create image element
    var img = document.createElement('img');
    img.src = 'https://www.google.com/images/srpr/logo3w.png';
    img.title = "hiiiiiiii"
    
    // create an instance of named image
    var namedImg = new fabric.NamedImage(img, { name: 'foobar' });
    namedImg.top = 200;
    namedImg.left = 200;
    // add it to canvas
    canvas.add(namedImg);
    canvas.renderAll();
});

$("#btnSerializeAndClear").click(function(){
   json = JSON.stringify(canvas)
   canvas.clear(); 
   console.log(json);
});

$("#btnRestore").click(function(){
    canvas.loadFromJSON(json, function(){
        canvas.forEachObject(function(object){
            console.log("[type: " + object.type + ", name: " +  object.name + "]");
        });
        canvas.renderAll();
        console.log(JSON.stringify(canvas));
    });
    
});