repository·master·Indexed 26 days ago
https://github.com/jnordberg/gif.jsA high-performance JavaScript GIF encoding library (v0.2.0) that uses Web Workers and Typed Arrays to render frames in the background. It provides the GIFEncoder class for creating animated GIFs, LZWEncoder for compression, and NeuQuant/TypedNeuQuant for color quantization.
gif.js, include the gif.js file found in the dist/ directory in your web page. You must also ensure that gif.worker.js is located in the same directory as gif.js so the web workers can be loaded correctly.The GIF constructor accepts an options object to configure the encoder. These options can also be updated later using the setOptions method.
| Name | Default | Description |
|---|---|---|
repeat | 0 | repeat count, -1 = no repeat, 0 = forever |
quality | 10 | pixel sample interval, lower is better |
workers | 2 | number of web workers to spawn |
workerScript | gif.worker.js | url to load worker script from |
background | #fff | background color where source image is transparent |
width | null | output image width |
height | null | output image height |
transparent | null | transparent hex color, e.g. 0x00FF00 |
dither | false | dithering method (e.g. FloydSteinberg-serpentine) |
debug | false | whether to print debug information to console |
Initialize a new GIF instance with desired options, add frames using images, canvas elements, or canvas contexts, and call .render() to start the encoding process. You can listen for the finished event to receive the resulting Blob.
var gif = new GIF({
workers: 2,
quality: 10
});
// add an image element
gif.addFrame(imageElement);
// or a canvas element
gif.addFrame(canvasElement, {delay: 200});
// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});
gif.on('finished', function(blob) {
window.open(URL.createObjectURL(blob));
});
gif.render();When setting the dither option, you can use one of the following methods:
FloydSteinbergFalseFloydSteinbergStuckiAtkinsonYou can append -serpentine to any method to use serpentine scanning (e.g., Stucki-serpentine).
When calling gif.addFrame(source, options), you can pass an options object to control individual frame behavior:
| Name | Default | Description |
|---|---|---|
delay | 500 | frame delay (in ms) |
copy | false | whether to copy the pixel data |
dispose | -1 | frame disposal code (per GIF89a Spec) |
gif.js library exports several core modules for GIF encoding and color quantization. You can require the main entry point to access GIFEncoder, LZWEncoder, and quantization tools like NeuQuant or TypedNeuQuant.LZWEncoder module provides the Lempel-Ziv-Welch compression algorithm required for the GIF file format.NeuQuant and TypedNeuQuant modules provide quantization algorithms used to reduce the color palette of images for GIF encoding.GIFEncoder class is the primary interface for creating animated GIFs. It manages the encoding process, frame addition, and rendering.