gif-canvas-renderer v1.0.0

GIFCanvasRenderer

A simple GIF renderer on canvas

We needed an efficient GIF renderer on canvas for our live classroom at Vedantu There are some libraries like libgif but it has many memory leaks and we found it very inefficient.

we came across an amazing GIF Parser by Matt Way gifuct-js

It is amazingly efficient and parses the next frame based on what is changed from previous one hence less pixel change on canvas at run time.

This library uses gifuct-js internally to parse the gif and hence render the gif on canvas

Usage

Installation:

npm install gif-canvas-renderer

-html

<canvas id="canvas-element"></canvas>

-gifRenderer

import GIFRenderer from gif-canvas-renderer

const gifObject = new GIFRenderer({
    gifSource: gifURL,
    canvasElement: document.getElementById('canvas-element'),
    renderGif: true,
    onFrameChange: (imageData) => {
      // find canvas element
      const canvasElm = document.getElementById('canvas-element')
      const ctx = canvas.getContext('2d');
      // render the imagedata on canvas
      ctx.putImageData(imageData.data, 20, 20);
    },
  });

  //call load() to start parsing

  gifObject.load(()=>{
      //callback
      console.log('do something')
  })

Constructor properties

Utility methods