Adding Stickers to Assets for Social Media

Code.js

// this relies heavily on Fabric.js. You'll need to add it as a resource for your external component.
// the URL I used was: https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.min.js

var self = this;
self.sb = null;

var entityLoadedSubscription = options.mediator.subscribe("entityLoaded", function (entity) {
    self.sb = new StickerBuilder();
    self.sb.initialize(entity);
});

StickerBuilder = function () {
    this._entity = null;
    this._options = null;

    this._canvas = null;

    this._previewImage = null;
    this._previewImageLoadedDelegate = null;

    this._addStickerButton = null;
    this._saveButtonClickDelegate = null;

    this._saveButton = null;
    this._saveButtonClickDelegate = null;

    this._stickerCount = 0;
}

StickerBuilder.prototype = {
    initialize: function (entity) {
        this._entity = entity;

        this._previewImage = $('#stickerBuilder img')[0];
        this._previewImageLoadedDelegate = this._previewImageLoaded.bind(this);
        this._previewImage.addEventListener("load", this._previewImageLoadedDelegate);

        $(this._previewImage).attr('src', this._entity.renditions().downloadPreview[0].href);
    },

    _previewImageLoaded: function (sender, args) {
        let that = this;
        this._canvas = new fabric.Canvas('stickerBuilderCanvas');

        this._saveButton = $('#saveButton')[0];
        this._saveButtonClickDelegate = this._saveImage.bind(this);
        this._saveButton.addEventListener("click", this._saveButtonClickDelegate);

        this._addStickerButton = $('#addSticker')[0];
        this._addStickerButtonClickDelegate = this._addSticker.bind(this);
        this._addStickerButton.addEventListener("click", this._addStickerButtonClickDelegate);

        this._canvas.setDimensions({ width: this._previewImage.width, height: this._previewImage.height });

        fabric.Image.fromURL(this._entity.renditions().downloadPreview[0].href, function(img) {
            img.scaleToWidth(that._canvas.width);
            img.set({originX: 'left', originY: 'top'});
            that._canvas.setBackgroundImage(img, that._canvas.renderAll.bind(that._canvas));
            $(that._previewImage).hide();

            if (that._entity.related_paths()['AssetTypeToAsset'][0][0].values['en-US'] === 'Social Media Asset') {
                $('#sticker-tools').show();
            }
        }, { crossOrigin: 'anonymous' });
    },

    _saveImage: function () {
        var win = window.open();
        win.document.write('<iframe src="' + this._canvas.toDataURL('png')  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
    },

    _addSticker: function () {
        let that = this;

        $.get("/api/entities/scroll/query?query=Definition.Name=='M.Asset' AND Parent('AssetTypeToAsset').id==13602", function(data) {
            // "randomly" adding stickers
            fabric.Image.fromURL(data.items[that._stickerCount].renditions.preview[0].href, function(img) {
                img.scaleToWidth(150);
                that._canvas.add(img);
            }, { crossOrigin: 'anonymous' });
            that._stickerCount++;
        });
    }
}

Template.html

<div id="stickerBuilder" style="position:relative;">
    <canvas id="stickerBuilderCanvas" style="position:absolute;top:0;left:0;z-index:0"></canvas>
    <div id="sticker-tools" style="display:none;margin:10px 0px;">
        <div id="addSticker" class="btn btn-primary">Add Sticker</div>
        <div id="saveButton" class="btn btn-primary">Save</div>
    </div>
    <img style="z-index:1;">
</div>