gif.js

Usage

var gif = new GIF({
  workers: 2,
  quality: 10
});

// add a image element
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

gif.on('finished', function(blob) {
  window.open(URL.createObjectURL(blob));
});

gif.render();

Demo

GIF images are generated in the background using web workers. Hover the original and reference tabs to see respective image.

Reference images are rendered with photoshop cs6 using the perceptual setting with no dither.

Other tests

• Canvas rendering
• Video to GIF