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

Question

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

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

Answer 1

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

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