将单帧从动画GIF提取到画布

时间:2011-01-10 09:27:27

标签: javascript html5 canvas animated-gif

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

请注意,我不想“播放”动画(之前有人问过),我想要的是提取所有帧以将它们用作单个图像。

3 个答案:

答案 0 :(得分:12)

Buzzfeed已经发布了repo tommitytom的代码。我还没试过,但看起来不错。

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

答案 1 :(得分:6)

看看jsgif;它下载一个GIF,解析它,并将文件的各个帧绘制到<canvas>。通过一些挖掘,您应该能够找到绘制各个帧并从那里开始工作的代码。

答案 2 :(得分:5)

很抱歉,简短的回答是JavaScript无法控制动画GIF的当前帧。

很长的答案是,有一些方法可以用JS做你想要的东西,但它们是非常令人费解的黑客。

hackish方式示例:创建一个画布,不要将它添加到DOM(所以任何人都不会看到它)。在快速循环(setTimeout)中,不断绘制到此画布并收集快照。比较画布ImageData以查看帧是否已更改。

可能会更好地利用你的时间来看看你如何让你的服务器为你分开(使用php / perl / python / etc)