前端有办法截取GIF 的第一帧吗?

wanhu
  • 19

因为GIF文件太大,想要实现截取GIF第一帧作为预览图,用户有兴趣自行点击才真正加载。
前端能进行这样的操作吗?或者, 是否有一种方法能够获取GIF文件加载的进度?

回复
阅读 775
3 个回答

代码不完整,提供一个思路:先以流的方式接收文件:

  const writer = createWriteStream(outputLocationPath);

  return Axios({
    method: 'get',
    url: fileUrl,
    responseType: 'stream',
  }).then(response => {
    return new Promise((resolve, reject) => {
      response.data.pipe(writer);
    });
  });

接收过程中,可以随时以gm获得第一帧,然后取消整个流就行了,这样应该能节省不少带宽:

gm(streamOrBuffer)
.selectFrame(0)
.write('/path/to/firstframe.png', function(err){
    if (err) print('  :(  ');
})

我觉得流的方式可能也不太好,可以考虑用Range头部强行规定我们只获取最前面的1000个字节,然后进行判断。

比如这样:

var req = new XMLHttpRequest();
req.open('get', 'https://www.domain.com/api', true);
req.setRequestHeader("Range", "bytes=0-1000");
req.send();

然后,用libgif-js挪到第一帧,然后用canvas获取下来:

var sup1 = new SuperGif({
  gif: document.getElementById("example1"),
});
sup1.move_to(0);

上面那个gm库不好,那个应该是只能运行在客户端,不能运行在浏览器里。

而且不知道只下载一部分的gif图片还能不能取出第一帧,这个需要实验一下。

可以的,我想到的有两种方式

  1. 通过 canvas 可以获取gif图片信息,取到的就是第一帧,但是无法获取其他帧(不过也满足题目要求)
  2. 使用 gif解析库,有现成的 https://github.com/shachaf/jsgif

按你的需求,其实应该后端生成缩略图的,那后端如何生成缩略图就不该在这里讨论,有太多技术可能方案了。也不限于用javascript语言实现了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏