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

Question

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

Answer 1

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

  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图片还能不能取出第一帧，这个需要实验一下。

Answer 2

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

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

Answer 3

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