将动画 GIF 的第一帧绘制到 HTML5 Canvas

Question

当我在画布元素完成加载整个 gif 之前将 gif 图像绘制到画布元素时，它只是一个白色区域。但是如果我这样做了

window.stop()

在完成之前，它会在元素中绘制 gif。 问题是停止整个页面会停止所有 gif，而不仅仅是我想要复制到画布的特定 gif。 如何在完成加载整个 gif 之前将当前加载到 gif 中的内容绘制到画布元素。 我正在考虑将其放入 iframe 并停止 iframe 或其他类似的技巧，但我也希望你们提供一些想法或解决方案。

编辑：有没有办法检测使用 javascript 以百分比下载了多少 gif？这样我就可以知道至少第一帧被下载了？

Answer 1

如何在画布元素完成加载整个 gif 之前将当前加载到 gif 中的内容绘制到画布元素

你不能。

这本身不是一个错误。规范规定：

如果图像参数是一个不能完全解码的 HTMLImageElement 对象......那么实现必须返回而不绘制任何东西。

当您执行stop() 时，它起作用的原因在技术上被宣布为完全可用。或者更准确地说是简单的英语，“as available as it going to get”。

假设您想要此功能，您最好的选择是从 gif 的帧中制作许多小图像，并在加载时使用它们。任何其他解决方案（例如动态分解 gif）都需要先加载整个 gif，您似乎认为这是不可接受的。