从动画 GIF 中提取单帧到画布答案

【问题标题】：Extracting single frames from an animated GIF to canvas从动画 GIF 中提取单帧到画布
【发布时间】：2016-04-08 00:16:28
【问题描述】：

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

请注意，我不想“播放”动画（之前有人问过这个问题），我只想提取所有帧以将它们用作单个图像。

【问题讨论】：

【解决方案1】：

Buzzfeed 已从发布的 repo tommitytom 中对代码进行了库化。我还没试过，但看起来不错。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

答案很长，有一些方法可以只用 JS 做你想做的事，但它们是非常复杂的 hack。

hackish 方式的示例：创建一个画布并且不要将其添加到 DOM（这样任何人都不会看到）。在快速循环 (setTimeout) 中，不断绘制到此画布并收集快照。比较画布 ImageData 以查看帧是否发生了变化。

这可能会更好地利用您的时间，看看如何让您的服务器为您拆分它（使用 php/perl/python/etc）

【讨论】：

骇人听闻的方式很聪明，但不可预测。我同意如果没有更好的 JS 解决方案出现，我将不得不求助于服务器端脚本......谢谢。
这种破解应该是不可能的。 when a CanvasImageSource object represents an animated image in an HTMLImageElement, the user agent must use the default image of the animation (the one that the format defines is to be used when animation is not supported or is disabled), or, if there is no such image, the first frame of the animationhtml.spec.whatwg.org/multipage/…
这个响应在当时可能是正确的。但是今天使用 libgif-js 可以完成工作，而且也很容易。
不正确，查看这个例子：libgif-js 的codepen.io/hoanghals/pen/dZrWLZ 和move_to() 函数