Search code examples
javascripthtmlcanvasanimated-gif

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.

Solution

  • 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)