前端实现视频转gif图片

效果图

demo

链接：
视频转gif (xushanxiang.com)

思路

video→canvas（ drawImage ）→ gif.js（ addFram ）→ gif.js （ render）

关键代码

ctx.drawImage(video, 0, 0, width, height);
gif.addFrame(ctx, {copy: true, delay: millisec});
it = setInterval(function(){addFrame();},millisec);
gif.render();
gif.abort();

gif拓展

gif.js

JavaScript GIF编码器，运行在您的浏览器。

https://github.com/jnordberg/gif.js

libgif-js

JavaScript GIF解析器和播放器。

https://github.com/buzzfeed/libgif-js

ezgif

在线GIF优化器。

https://ezgif.com/optimize