fabric.js custom class

by Vijay Gujar

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/all.js"></script>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>
<button id="toJSON">toJSON</button>
<button id="loadFromJSON">loadFromJSON</button>
<button id="toDatalessJSON">toDatalessJSON</button>
<button id="loadFromDatalessJSON">loadFromDatalessJSON</button>

<img style="display: none" id="background" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAdCAYAAADVV140AAABtElEQVR42sWYWQ6EIBBEOY37ev/DOSkTEpKSPBmJfhBHpZtHNw3lhKZpjmVZjn3fb7V1XY+u6w7ZjeN4tG17tmma0n6nzwvf6hdtZK8+8ie/OHbq+zb4tm3noOrf970Gyj93cD3Xez1Tf9nlnheBU8c0spgJ9ZnnWb911T1FNs0E8DC4Zh9hdLVoAIDscMI8Xjl4ugT8PQMI2AG4pUsHwSF6kMLSxktS7Rm4Zq+IxSgMw3AngqUZkl/5T8d7DB7vVWgxGvr9BJZ8VgG36MT9V+/+jH6aRfkzP/XA3TgWYGYA3Hlkn479ArjvPA6Rn6ztGG+Cc9p5eX0EzoUmQCjoL8B5L5YtnAG1wD21Jce92/vSKTn2U3sAd0Fl9yWRBwFHQsvur8DzAseLSwqvJrj85Yr7kiuC67j1AmLpKiePwGXvkpcLX7zB1lJhSqMNgzt0fgly7QQZZWZKszcwA+f3kOV85sMDfVED/F/dA+BwtNcAZynA4CViqiI4f3cyOOuL+uCsewCcxf0r4Mzg4PCJ9gI4f9IZOKyvt8H5f52gNEBFfwDOO1sA/UFOXDkyuPpDsFjX/AAaVQm/PXemlQAAAABJRU5ErkJggg==" />

CSS

canvas {
    border: 1px solid gray
}

JavaScript

var canvas, json;

// -- fabric.custom.js --
fabric.CustomImage = fabric.util.createClass(fabric.Image, {
    type: 'custom-image',

    initialize: function (element, options) {
        this.callSuper('initialize', element, options);
        options && this.set('imageID', options.imageID);
    },
    toObject: function () {
        return fabric.util.object.extend(this.callSuper('toObject'), {
            imageID: this.imageID
        });
    }
});

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

fabric.CustomImage.fromURL = function (url, callback, imageOptions) {
    fabric.util.loadImage(url, function (img) {
        callback && callback(new fabric.CustomImage(img, imageOptions));
    });
};

fabric.CustomImage.async = true;

$(function () {
    canvas = window._canvas = new fabric.Canvas('canvas');
    var rect = new fabric.Rect({
        left: 100,
        top: 100,
        width: 100,
        height: 100,
        fill: 'red',
        perPixelTargetFind: false
    });
    canvas.add(rect);
    canvas.renderAll();

    fabric.CustomImage.fromURL(document.getElementById('background').src, function (o) {
        o.set({left: 200, top: 200});
       canvas.add(o);
    }, {imageID: 'test1'});
    $('button').on('click', function(e) {
        if (this.id === 'toJSON' || this.id === 'toDatalessJSON') {
           json = window._json = canvas[this.id]();
           canvas.clear();
        }
        else {
            if(json) {
              canvas[this.id](json);
            }
        }
    });
});

fabric.Textpath = fabric.util.createClass(fabric.Group, {
            type: "textpath",
            typeSetter: "textpath",
            textAlign: "left",
            textOffset: 0,
            lettersToLettersOffset: 0,
            pathVisible: !0,
            copyGroupOptsFromPath: ["top", "left"],
           ...