react-design-editor/lib/objects/Gif.js

Design Editor Tools with React.js + ant.design + fabric.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fabric_1 = require("fabric");
require("gifler");
const Gif = fabric_1.fabric.util.createClass(fabric_1.fabric.Image, {
    type: 'gif',
    superType: 'image',
    gifCanvas: null,
    gifler: undefined,
    isStarted: false,
    initialize(options) {
        options = options || {};
        this.gifCanvas = document.createElement('canvas');
        this.callSuper('initialize', this.gifCanvas, options);
    },
    drawFrame(ctx, frame) {
        // update canvas size
        this.gifCanvas.width = frame.width;
        this.gifCanvas.height = frame.height;
        // update canvas that we are using for fabric.js
        ctx.drawImage(frame.buffer, 0, 0);
        this.canvas?.renderAll();
    },
    _render(ctx) {
        this.callSuper('_render', ctx);
        this.dirty = true;
        if (!this.isStarted) {
            this.isStarted = true;
            this.gifler = window
                // @ts-ignore
                .gifler('https://themadcreator.github.io/gifler/assets/gif/nyan.gif')
                // .gifler('./images/sample/earth.gif')
                .frames(this.gifCanvas, (context, frame) => {
                this.isStarted = true;
                this.drawFrame(context, frame);
            });
        }
    },
});
Gif.fromObject = (options, callback) => {
    return callback(new Gif(options));
};
// @ts-ignore
window.fabric.Gif = Gif;
exports.default = Gif;