如何使用HTML5 canvas和Javascript将putImageData与GIF动画一起使用?

时间:2011-04-15 13:17:39

标签: javascript html5 canvas gif animated

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

编辑:有没有办法在Javascript中查询动画gif的当前帧,所以我可以在动画进行时将putImageData用于图像中?

1 个答案:

答案 0 :(得分:2)

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

如果您可以在服务器上解压缩帧然后手动设置动画(例如Gmail does),那么这可能是您的最佳选择。