从动态GIF中提取单独的帧画面到画布上。

Question

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

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

- Omiod

---

你能否更具体一些？ - user372551

当然可以。使用JavaScript+Canvas，我希望加载一个单独的“anim-gif”文件（由许多帧组成），然后我想将每个提取的单独帧用作单独的图像。 - Omiod

Answer 1

Buzzfeed已将tommitytom发布的仓库代码转化为库文件。虽然我还没有尝试过，但它看起来不错。

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

- Brendan

Answer 2

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

- tommitytom

Answer 3

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

长的回答是，有一些“巧妙”的方法可以用JS实现你想要的效果，但它们都是非常复杂的黑客技术。

例如：创建一个画布，并将其不添加到DOM中（这样任何人都看不到）。在快速循环（setTimeout）中不断绘制到此画布并收集快照。比较画布ImageData以查看帧是否已更改。

可能更好的做法是，尝试让服务器为您拆分它（使用php/perl/python等语言）。

- Simon Sarris

---

"hackish" 的方式很巧妙，但不可预测。如果没有更好的 JS 解决方案出现，我同意必须转向服务器端脚本... 谢谢。 - Omiod

这种黑客攻击不应该存在。当CanvasImageSource对象在HTMLImageElement中表示动画图像时，用户代理必须使用动画的默认图像（格式定义为在不支持或禁用动画时要使用的图像），或者如果没有这样的图像，则使用动画的第一帧。https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage#image-sources-for-2d-rendering-contexts - Robert

这个回答在当时可能是正确的。但是现在使用libgif-js可以完成工作，而且也很容易。 - Clive Paterson

这不是真的，请查看此示例：https://codepen.io/hoanghals/pen/dZrWLZ 和 libgif-js 的 move_to() 函数。 - Flash Thunder

Answer 4

当您只需要 GIF 的第一帧时：

const image = document.getElementById('my-image');
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext("2d");
// context.drawImage(img, x, y, width, height);
ctx.drawImage(image, 0, 0);

致谢：如何在画布上绘制GIF？

- Avatar