gif-frames

gif-frames

A pure JavaScript tool for extracting GIF frames and saving to file. Works in Node or the browser. Uses get-pixels and save-pixels under the hood.

Install

npm install gif-frames

require('gif-frames')(options[, callback])

Options:

• url (required): The pathname to the file, or an in-memory Buffer
• frames (required): The set of frames to extract. Can be one of:
  • 'all' (gets every frame)
  • Any valid Initializer accepted by the multi-integer-range library
• outputType (optional, default 'jpg'): Type to use for output (see type for save-pixels)
• quality (optional): Jpeg quality (see quality for save-pixels)

The callback accepts the arguments (error, frameData).

Returns:

A Promise resolving to the frameData array (if promises are supported in the running environment)

frameData

An array of objects of the form:

{
  getImageStream,
  frameIndex
}

Examples

Writing selected frames to the file system in Node:

var gifFrames = require('gif-frames');
var fs = require('fs');

gifFrames(
  { url: 'image.gif', frames: '0-2,7', outputType: 'png' },
  function (err, frameData) {
    if (err) {
      throw err;
    }
    frameData.forEach(function (frame) {
      frame.getImageStream().pipe(fs.createWriteStream(
        'image-' + frame.frameIndex + '.png'
      ));
    });
  }
);

Drawing first frame to canvas in browser (and using a Promise):

var gifFrames = require('gif-frames');

gifFrames({ url: 'image.gif', frames: 0, outputType: 'canvas' })
  .then(function (frameData) {
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    frameData[0].getImageStream().pipe(canvas);
  }).catch(console.error.bind(console));

Changelog

[0.2.0] - 2017-06-26

Added

• frames option for specifying which frames we want
• getFrames returns a Promise if available in environment
• Callback and promise pass a data stream for each requested frame
• Dependency on multi-integer-range

Changed

• Better browser usage example (but it doesn't work!)

Removed

• File writing - users can do that themselves (helps with interoperability between Node / browser)