javascript - 如何使用 HTML5 画布和 Javascript 将 putImageData 与动画 gif 一起使用？

Question

我想在浏览器中播放动画 gif 的每一帧的图像数据，我想使用 HTML5 画布和 Javascript 来完成。例如，我有一个动画 gif，我想在浏览器中播放时将每一帧转换为灰度。这可能吗？每当我在动画 gif 中操作图像数据时，只会显示第一帧（正确操作），并且 gif 将不再播放。如果有解决方案，这将是一种非常有用的技术。谢谢你。

编辑：有没有办法在 Javascript 中查询动画 gif 的当前帧，所以我可以在动画进行时使用 putImageData 到图像中？

Answer 1

正如本页指出的那样，您可以使用 drawImage() 在画布上绘制 GIF，目前它会在 Gecko 和 WebKit 中从 GIF 中绘制当前帧——但在 Opera 中不是，也不是根据规范，所以依赖这种行为不是一个好主意。据我所知，没有办法从 DOM 中获取单个帧数据；在编写jsgif之前，我研究了一段时间（在另一个答案中提到过，但实际上并不意味着任何实际用途——对于一个人来说，这是非常低效的）。

如果您可以在服务器上解压帧然后手动对其进行动画处理（例如Gmail 所做的那样），那么这可能是您的最佳选择。