html 将动画GIF中的单个帧提取到画布

bakd9h0s  于 2022-12-09  发布在  其他
关注(0)|答案(4)|浏览(119)

我需要将动画GIF的所有帧加载到HTML5画布中。
请注意,我不想"播放"动画(有人问过这个问题),我想要的是提取所有的帧,将它们作为单个图像使用。

q43xntqr

q43xntqr1#

Buzzfeed已经把tommitytom发布的代码库化了。我还没有试过,但是看起来不错。
https://github.com/buzzfeed/libgif-js

agxfikkp

agxfikkp2#

看一看jsgif;它下载一个GIF,解析它,并将文件的各个帧绘制到<canvas>中。

toiithl6

toiithl63#

对不起,简单的回答是JavaScript无法控制动画GIF的当前帧。
长的答案是,有排序的方法来做你想要的只是JS,但他们是非常复杂的黑客。
列子的粗鄙道:创建一个画布,但不要将其添加到DOM中(这样任何人都不会看到)。在快速循环(setTimeout)中,不断地绘制到该画布并收集快照。比较画布的ImageData以查看帧是否发生了变化。
这将是一个更好的利用你的时间,也许,看看你可以让你的服务器为你分裂它(与php/perl/python/etc)

kninwzqo

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?

相关问题