我需要将动画GIF的所有帧加载到HTML5画布中。请注意,我不想"播放"动画(有人问过这个问题),我想要的是提取所有的帧,将它们作为单个图像使用。
q43xntqr1#
Buzzfeed已经把tommitytom发布的代码库化了。我还没有试过,但是看起来不错。https://github.com/buzzfeed/libgif-js
agxfikkp2#
看一看jsgif;它下载一个GIF,解析它,并将文件的各个帧绘制到<canvas>中。
<canvas>
toiithl63#
对不起,简单的回答是JavaScript无法控制动画GIF的当前帧。长的答案是,有排序的方法来做你想要的只是JS,但他们是非常复杂的黑客。列子的粗鄙道:创建一个画布,但不要将其添加到DOM中(这样任何人都不会看到)。在快速循环(setTimeout)中,不断地绘制到该画布并收集快照。比较画布的ImageData以查看帧是否发生了变化。这将是一个更好的利用你的时间,也许,看看你可以让你的服务器为你分裂它(与php/perl/python/etc)
kninwzqo4#
如果只需要GIF的第一个帧:
const image = document.getElementById('my-image'); const canvas = document.getElementById('my-canvas'); const ctx = canvas.getContext("2d"); // context.drawImage(img, x, y, width, height); ctx.drawImage(image, 0, 0);
制作人员:How to draw a GIF on a canvas?
4条答案
按热度按时间q43xntqr1#
Buzzfeed已经把tommitytom发布的代码库化了。我还没有试过,但是看起来不错。
https://github.com/buzzfeed/libgif-js
agxfikkp2#
看一看jsgif;它下载一个GIF,解析它,并将文件的各个帧绘制到
<canvas>
中。toiithl63#
对不起,简单的回答是JavaScript无法控制动画GIF的当前帧。
长的答案是,有排序的方法来做你想要的只是JS,但他们是非常复杂的黑客。
列子的粗鄙道:创建一个画布,但不要将其添加到DOM中(这样任何人都不会看到)。在快速循环(setTimeout)中,不断地绘制到该画布并收集快照。比较画布的ImageData以查看帧是否发生了变化。
这将是一个更好的利用你的时间,也许,看看你可以让你的服务器为你分裂它(与php/perl/python/etc)
kninwzqo4#
如果只需要GIF的第一个帧:
制作人员:How to draw a GIF on a canvas?