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

Question

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

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

Answer 1

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

Answer 2

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

Answer 3

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

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

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

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

这种黑客行为是不可能的.`当CanvasImageSource对象表示HTMLImageElement中的动画图像时,用户代理必须使用动画的默认图像(当不支持或禁用动画时,将使用格式定义的图像),或者,如果有没有这样的图像,动画的第一帧`https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage#image-sources-for-2d-rendering-contexts (2认同)