Extract individual frames from animated GIFs on canvas

Question

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

Please note: I don’t want to “play” animated ones (someone asked this before), all I want to do is extract all the frames in order to use them as separate images.

Answer 1

Unfortunately, the short answer is that JavaScript does not have the ability to control the current frame of the Animated GIF.

The long answer is that there are several ways to do what you want with JS only, but they are very confusing.

An example of a hacker way: create a canvas and do not add it to the DOM (so that it will not be visible to anyone). In a fast cycle (setTimeout), constantly draw on this canvas and collect snapshots. Compare canvas ImageData to see if frames have changed.

It would be better to use your time, perhaps to find out how you can share its server for you (using php / perl / python / etc)

Answer 2

Buzzfeed lyricized the code from the repo tommitytom message. I haven't tried it yet, but it looks good.

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

Answer 3

Take a look at jsgif ; it loads the GIF, parses it, and draws individual frames of the file on the <canvas> . With a little digging, you can find code that draws individual frames and work from there.