问题
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.
回答1:
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)
回答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
回答3:
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.
来源：https://stackoverflow.com/questions/4645274/extracting-single-frames-from-an-animated-gif-to-canvas