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

Option	Description
gifSource	url of the gif file
onFrameChange	function is called on every frame change with ImageData structure of ImageData is {currentIndex: current_frame_index, data: ImageData, totalFrames: total_frames_in_the_gif }
canvasElement	canvas html element
renderGif	true if gif is needed to be rendered on canvas
handleOnCompleteLoop	function gets called once loop is completed , parameters are iterationCount = current_Count_loop, length = total_frames
delay	delay between two frames to render

Utility methods

Methods	Description
stopParsingGIF	stop parsing gif
getLength	total frame length of the gif
play	method to play the gif
pause	method to pause the gif
isPlaying	returns true if gif is playing otherwise false