将动态GIF的第一帧绘制到HTML5画布上。

Question

将动态GIF的第一帧绘制到HTML5画布上。

4

当我在gif图片加载完成之前将其绘制到画布元素上时，它只会显示为白色区域。但如果我这样做：

window.stop()

在完成之前，它会在元素中绘制gif。问题是，停止整个页面会停止所有gif，而不仅仅是我想复制到画布的特定gif。如何在完全加载gif之前将当前加载的内容绘制到画布元素上。我想可能把它放在iframe中并停止iframe或其他一些诀窍，但我也想听听你们提供的想法或解决方案。

编辑：有没有办法使用javascript检测已下载的gif占总大小的百分比？这样我就可以知道至少下载了第一帧吗？

- John

你是否正在尝试将动态GIF的帧提取到画布中？ - Matt Greer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Sarris · Accepted Answer

在gif完全加载之前，如何将当前加载的内容绘制到canvas元素中？你做不到这一点。这不是一个错误。规范规定：如果image参数是未完全解码的HTMLImageElement对象...则实现必须返回而不绘制任何内容。当你停止时，它可以正常工作，因为图像在技术上被声明为完全可用。或者更准确地说，在简单的英语中，“尽可能可用”。假设您想要此功能，则最好的方法是将gif的帧制成许多小图像，并在加载时使用它们。任何其他解决方案（例如动态拆分gif）都需要先加载整个gif，这似乎是不可接受的。