Package Exports

gifencoder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gifencoder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gifencoder

Streaming server-side animated (and non-animated) gif generation for node.js

This code is based on the fine work of the following developers, but adds server-side generation with node-canvas and support for node.js Buffers:

Kevin Weiner (original Java version - kweiner@fmsware.com)
Thibault Imbert (AS3 version - bytearray.org)
Johan Nordberg (gif.js - code@johan-nordberg.com)

Installation

This module is installed via npm:

$ npm install gifencoder

Example Usage

var GIFEncoder = require('gifencoder');
var Canvas = require('canvas');
var fs = require('fs');

var encoder = new GIFEncoder(320, 240);
encoder.start();
encoder.setRepeat(0);   // 0 for repeat, -1 for no-repeat
encoder.setDelay(500);  // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.

// use node-canvas
var canvas = new Canvas(320, 240);
var ctx = canvas.getContext('2d');

// red rectangle
ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, 320, 240);
encoder.addFrame(ctx);

// green rectangle
ctx.fillStyle = '#00ff00';
ctx.fillRect(0, 0, 320, 240);
encoder.addFrame(ctx);

// blue rectangle
ctx.fillStyle = '#0000ff';
ctx.fillRect(0, 0, 320, 240);
encoder.addFrame(ctx);

encoder.finish();

var buf = encoder.stream().getData();
fs.writeFile('myanimated.gif', buf, function (err) {
  // animated GIF written to myanimated.gif
});

The above code will render an image like:

Animated GIF

Streaming API - Reads

You can also use a streaming API to receive data:

var GIFEncoder = require('gifencoder');
var Canvas = require('canvas');
var fs = require('fs');

var encoder = new GIFEncoder(320, 240);
// stream the results as they are available into myanimated.gif
encoder.createReadStream().pipe(fs.createWriteStream('myanimated.gif'));

encoder.start();
encoder.setRepeat(0);   // 0 for repeat, -1 for no-repeat
encoder.setDelay(500);  // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.

// use node-canvas
var canvas = new Canvas(320, 240);
var ctx = canvas.getContext('2d');

// red rectangle
ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, 320, 240);
encoder.addFrame(ctx);

// green rectangle
ctx.fillStyle = '#00ff00';
ctx.fillRect(0, 0, 320, 240);
encoder.addFrame(ctx);

// blue rectangle
ctx.fillStyle = '#0000ff';
ctx.fillRect(0, 0, 320, 240);
encoder.addFrame(ctx);

encoder.finish();

Streaming API - Writes

You can also stream writes of pixel data (or canvas contexts) to the encoder:

var GIFEncoder = require('gifencoder');
var encoder = new GIFEncoder(854, 480);
var bitMapStream = makeMyBitMaps(); // read stream that creates RGBA 1-dimensional bitmaps
bitMapStream
  .pipe(encoder.createWriteStream({ repeat: -1, delay: 500, quality: 10 }))
  .pipe(fs.createWriteStream('myanimated.gif'));

NB: The chunks that get emitted by your read stream must either by a 1-dimensional bitmap of RGBA data (either an array or Buffer), or a canvas 2D context.