Skip to content
Server side animated gif generation for node.js
JavaScript
Latest commit 43ebaec Apr 9, 2015 @eugeneware Merge pull request #4 from rochoa/patch-1
Fixes README pipes example
Failed to load latest commit information.
examples fix example Oct 22, 2014
lib clarify delay comment Dec 21, 2014
test update tests to use png-file-stream Oct 5, 2013
.gitignore Initial commit Oct 5, 2013
.jshintrc Initial commit Oct 4, 2013
Gruntfile.js Initial commit Oct 4, 2013
LICENSE Initial commit Oct 4, 2013
README.md Fixes README pipes example Mar 6, 2015
index.js Initial commit Oct 4, 2013
package.json 1.0.6 Jan 5, 2015

README.md

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:

Installation

This module is installed via npm:

$ npm install gifencoder

Streaming API - Duplex Piping with 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 pngFileStream = require('png-file-stream');
var fs = require('fs');

pngFileStream('test/**/frame?.png')
  .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.

Example: 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();

The above code will generate the following animated GIF:

Animated GIF

Something went wrong with that request. Please try again.