将单个帧从动画GIF提取到画布 [英] Extracting single frames from an animated GIF to canvas

问题描述

我需要将动画GIF的所有帧加载到HTML5画布。

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.

推荐答案

对不起，短的答案是JavaScript没有办法控制动画GIF的当前框架。

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

很长的答案是有很多种方法来做你想要的JS，但他们是非常复杂的黑客。

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.

hackish方法的例子：创建一个画布，不要将其添加到DOM（因此这将不会被看到由任何人）。在快速循环（setTimeout）中，持续绘制到此画布并收集快照。比较画布ImageData，看看这些框架是否已经改变。

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.

这可能是更好地利用你的时间，看看如何让你的服务器将它分开（使用php / perl / python / etc）

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)

这篇关于将单个帧从动画GIF提取到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！