如何使用putImageData与动画gif使用HTML5画布和Javascript

How to use putImageData with animated gifs using HTML5 canvas and Javascript?

本文关键字：HTML5 Javascript 使用 gif 何使用 putImageData 动画更新时间：2023-09-26

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

编辑:是否有一种方法来查询Javascript动画gif的当前帧，所以我可以使用putImageData到图像作为动画的进展?

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

如果你可以在服务器上解压帧，然后手动动画它们(例如，像Gmail一样)，这可能是你最好的选择。