sole / Animated_GIF

Javascript library for creating animated GIFs
https://sole.github.io/Animated_GIF
225 stars 53 forks source link

Animated_GIF NPM Version

A Javascript library for creating animated GIFs

How to use it?

Include dist/Animated_GIF.js in your HTML.

var imgs = document.querySelectorAll('img');

var ag = new Animated_GIF(); 
ag.setSize(320, 240);

for(var i = 0; i < imgs.length; i++) {
    ag.addFrame(imgs[i], { delay: 1000 });
}

var animatedImage = document.createElement('img');

// This is asynchronous, rendered with WebWorkers
ag.getBase64GIF(function(image) {
    animatedImage.src = image;
    document.body.appendChild(animatedImage);
});

If you instance lots of Animated_GIF objects, it's strongly recommended that you call their destroy method once you're done rendering the GIFs, as browsers don't seem to be happy otherwise. See the stress test for an example of this in use!

Minified versions

There's a minified version in dist/: dist/Animated_GIF.min.js.

Using from npm

You can also use this via npm.

To install:

npm install --save animated_gif

To use:

var Animated_GIF = require('animated_gif');

// And then the examples are as before
var ag = new Animated_GIF(); 
ag.setSize(320, 240);

// ... etc

Available options

Pass an object with the desired values when creating an Animated_GIF instance:

addFrame options

Tests and examples

Check the files in the tests folder:

Start the server from the root folder (e.g. Animated_GIF). One way of doing it is using the simple Python web server:

python -m SimpleHTTPServer

starts a server in http://localhost:8000. So you can now go to http://localhost:8000/tests/ and see the available examples.

Contributing / walkthrough

Here's a quick walkthrough of each of the files in src/ and what they do:

External / included libraries --see Credits for more information on these. You generally don't want to touch these because it will make very difficult to track updates in those libraries:

Rebuild dist files

If you made changes in the library, you'll need to rebuild the files in dist/ in order to see the changes working. We have a node.js-based script to regenerate those files.

Once node.js is installed in your system, do:

cd Animated_GIF     # or however you cloned the library to
npm install         # this pulls dependencies for building (uglify, browserify)
npm run build       # and this actually builds

Once you do the initial two steps you just need to execute npm run build whenever you change things and want to rebuild the files in dist/. Or you can also use npm run watch to have it build the library automatically.

Credits

We're using these fantastic libraries to do GIF stuff:

And then, to build the dist files