GifWriter.js 0.1.0 Released

Release notes JavaScript Library TypeScript

We released GifWriter.js 0.1.0 on 22 April 2013. This is a GIF encoder library written in TypeScript (and of course, it is built into JavaScript).

Downloads

You can get JavaScript file from a download page:

You can get source code written in TypeScript from the repository.

Classes

In this version, two fundamental classes are included.

  • vividcode.image.GifWriter
  • vividcode.image.MedianCutColorReducer

vividcode.image.GifWriter

vividcode.image.GifWriter class writes an indexed color image data to an output stream.

  • An indexed color image data is represented with an object which has vividcode.image.IIndexedColorImage interface. The vividcode.image.IndexedColorImage implements this interface.
  • An output stream is represented with an object which has vividcode.image.IOutputStream interface.

vividcode.image.MedianCutColorReducer

vividcode.image.MedianCutColorReducer is simple color quantizer. It uses the median cut algorithm. If you have a full color image data and you want to write it as GIF by using GifWriter, you must do color quantization by using this class (or by other way) first.

Sample code

How to use GifWriter

This code shows how to create GIF file from IndexedColorImage object on Node.js.

// This is sample image data
var indexedColorImage = new vividcode.image.IndexedColorImage(
    { width: 9, height: 9 },
    // image data: one element represents one pixel.
    //   value is color index: 0 is black (0,0,0), 1 is white (255,255,255)
    [
        0,0,0,1,1,1,0,0,0,
        0,0,0,1,1,1,0,0,0,
        0,0,0,1,1,1,0,0,0,
        1,1,1,1,1,1,1,1,1,
        1,1,1,1,1,1,1,1,1,
        1,1,1,1,1,1,1,1,1,
        0,0,0,1,1,1,0,0,0,
        0,0,0,1,1,1,0,0,0,
        0,0,0,1,1,1,0,0,0,
    ],
    // palette data: sequence of three elements (red, green, blue) represents one color.
    [0,0,0, 255,255,255]
);

// This object is used by GifWriter. Only two methods `writeByte` and `writeBytes` are
// required.
var outputStream = {
    buffer: [],
    writeByte: function (b: number) {
        this.buffer.push(b);
    },
    writeBytes: function (bb: number[]) {
        Array.prototype.push.apply(this.buffer, bb);
    },
};

// Write GIF data to outputStream
var gifWriter = new vividcode.image.GifWriter(outputStream);
gifWriter.writeHeader();
gifWriter.writeLogicalScreenInfo({
    width: indexedColorImage.width,
    height: indexedColorImage.height,
});
gifWriter.writeTableBasedImage(indexedColorImage);
gifWriter.writeTrailer();

// Write data to file (node.js)
var buf = new Buffer(outputStream.buffer);
var fs = require("fs");
fs.writeFile('test.gif', buf, function (err) {
    if (err) console.log(err);
    console.log('It\'s saved!');
});

This script generates the following GIF image: f:id:nobuoka:20130422015945g:plain

How to use MedianCutColorReducer

This code shows how to create IndexedColorImage object from ImageData object.

// imgData has ImageData interface of HTML standard
var imgData = canvasElem.getContext("2d").getImageData(0,0,128,128);
// number of colors you want to use (min: 1, max: 255)
var paletteSize = 128;

var reducer = new vividcode.image.MedianCutColorReducer(imgData, paletteSize);
var paletteData = reducer.process();
var dat = Array.prototype.slice.call(imgData.data);
var indexedColorImageData = [];
for (var idx = 0, len = dat.length; idx < len; idx += 4) {
  var d = dat.slice(idx, idx+4); // r,g,b,a
  indexedColorImageData.push(reducer.map(d[0],d[1],d[2]));
}
return new IndexedColorImage({ width: imgData.width, height: imgData.height },
      indexedColorImageData, paletteData);