Extracting single frames from an animated GIF to canvas

Question

I need to load all the frames of an animated GIF to an HTML5 canvas.

Please note, I don\'t want to \"play\" the animated (someone asked this before), all I want is t

Answer 1

Take a look at jsgif; it downloads a GIF, parses it, and draws the individual frames of the file to a <canvas>. With a bit of digging you should be able to find the code that draws the individual frames and work from there.

Answer 2

Buzzfeed have librarified the code from the repo tommitytom posted. I haven't tried it yet but it looks good.

https://github.com/buzzfeed/libgif-js

Answer 3

Sorry, the short answer is that JavaScript has no way of controlling the current frame of an Animated GIF.

The long answer is that there are sort-of ways to do what you want with just JS, but they are very much convoluted hacks.

Example of hackish way: Create a canvas and don't add it to the DOM (so this won't be seen by anyone). In a fast loop (setTimeout), draw to this canvas constantly and collect snapshots. Compare the canvas ImageData to see if the frames have changed or not.

It would be a better use of your time, probably, to see how you can get your server to split it apart for you (with php/perl/python/etc)