前端实现视频转gif图片

作者: xusx 分类: Web 发布时间: 2022-07-02 10:24 浏览:140

效果图

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

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!