quick-gif.js
v0.0.1
Published
A simple and quick gif encoding library in JavaScript.
Downloads
15
Readme
quick-gif.js
A simple and quick gif encoding library for the browser. Heavily inspired by https://github.com/jnordberg/gif.js.
Installation
npm install --save quick-gif.js
Usage
This library is slightly different than other browser-based GIF encoders. Instead of collecting all the frames and waiting until the end of the media to start processing, quick-gif.js
will start processing frames as soon as it receives them. This is where the quick
comes from in the name.
// import the GIF class
import { GIF } from "quick-gif.js";
// create a new GIF instance
var gif = new GIF(width, height, {
workers: 2, // will spawn 2 web workers
quality: 10 // quality of the render - the lower the better
});
// As you are rendering via a canvas, you can
// call the `addFrame` with the image data (ctx.getImageData())
// as soon as you write a new frame. As soon as you do this,
// the renderer will begin converting that frame for the resulting gif
function onNewFrame(imageData) {
gif.addFrame(imageData, {
delay: 1000 / 30 // 30 fps
});
}
// Once you are done streaming media, you can
// tell the renderer that you are finished sending frames
// and allow it to finish up
function onVideoFinished() {
gif.finish();
}
// finished will be emitted once all the frames have been processed
// and compiled into a gif
gif.on("finished", function(blob) {
window.open(URL.createObjectURL(blob));
// you want to make sure and free up the resources
// used by the renderer once you're done
gif.destroy();
});
// Calling start will kick the renderer off
// and allocate resources for all frames
gif.start();
You can see a working example in /example.
Note
Building GIFs in your browser is pretty memory intensive. If your task is too large (high frame rate / long video / etc) you may crash your window.