Streaming server-side animated (and non-animated) gif generation for node.js
This module is installed via npm:
$ npm install gifencoder
You can also stream writes of pixel data (or canvas contexts) to the encoder:
const GIFEncoder = require('gifencoder'); const encoder = new GIFEncoder(854, 480); const pngFileStream = require('png-file-stream'); const fs = require('fs'); const stream = pngFileStream('test/**/frame?.png') .pipe(encoder.createWriteStream({ repeat: -1, delay: 500, quality: 10 })) .pipe(fs.createWriteStream('myanimated.gif')); stream.on('finish', function () { // Process generated GIF }); // Alternately, you can wrap the "finish" event in a Promise await new Promise((resolve, reject) => { stream.on('finish', resolve); stream.on('error', reject); });
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.
You can also use a streaming API to receive data:
const GIFEncoder = require('gifencoder'); const { createCanvas } = require('canvas'); const fs = require('fs'); const 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 const canvas = createCanvas(320, 240); const 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:
gifencoder is an OPEN Open Source Project. This means that:
Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.
See the CONTRIBUTING.md file for more details.
gifencoder is only possible due to the excellent work of the following contributors:
| Kevin Weiner | kweiner@fmsware.com |
|---|---|
| Thibault Imbert | http://www.bytearray.org/ |
| Eugene Ware | GitHub/eugeneware |
| Raine Virta | GitHub/raine |
| Paul Ochoa | GitHub/rochoa |
| Heikki Pora | GitHub/heikkipora |