Extracting single frames from an animated GIF to canvas

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 to extract all the frames to use them as single images.

Answer

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)