Access your amazing GIF files in javascript. Change their playback, skip around, add filters, export individual frames, the data once locked away in the world of desktop applications is now yours in the browser.
The work flow is pretty simple. Load a GIF from a url on the internet, give it a second, and you're good to go. Here's a basic overview of the interface
grabs a gif from the internet and rips it to pieces
starts playing the gif
stops playing the gif
jumps to a frame within the animation. to see how many frames are in an animation, check the length of the array gif.frames.length
to play at half speed, call speed(0.5) to play twice as fast, call speed(2)
There's also events you can subscribe to within the gif. These help when you have multiple interfaces talking to a gif. Register as many callbacks as you want.
gets fired once the gif has been downloaded and the data is ready
there's a built in animation handler. this gets called whenever the frame has changed and is ready to draw.
fired whenever the gif starts playing
fired when the gif is paused
All rendering is handled outside this module, but that doesn't mean the documentation should leave you hanging! There's also the example code if you want to skip ahead into something a little more complex.
var myelement = $dd.dom('#dance'),
frame_buffer = document.createElement('canvas'),
gif = Giffer();
gif.on_frame(function(img_data){
frame_buffer.width = gif.width;
frame_buffer.height = gif.height;
frame_buffer.getContext('2d').putImageData(_gif,0,0);
myelement.css({
width: gif.width + 'px',
height: gif.height + 'px',
'background-image': frame_buffer.toDataURL()
});
});
gif.load('http://i.imgur.com/98BbqFr.gif');