当前位置: 首页 > Web前端 > JavaScript

前端gif和滤镜会碰撞出怎样的火花呢?我写了一个可以混合gif和滤镜的库

时间:2023-03-26 21:28:34 JavaScript

这是一个可以将滤镜图像混合成gif的库,它会返回一个新的gifdataURL。您还可以使用额外导出的createGIF方法将多张图片、视频,甚至是电脑摄像头的实时录像转换为gif。业务的来源,当然是来自优秀的产品经理。当时产品提了一个研究需求,想看看前端能不能合成gif的滤镜。经过几天的忙碌,拿到了这样的产品,除了帧率有点偏差外,其他都很满意!大致思路是先将gif拆解成一帧帧的图片,然后用滤镜合成,最后合成一个新的gif输出。后来想到这个东西可以推广。即使你很少在业务中使用它(除非你在一家经常处理图像处理的公司),它作为一个玩具也不错,所以我在github和npm上开源了它。提供了一个在线站点来试用它。喜欢的话,给个star吧:github/colorful_gif应用场景你可以用它生成很多漂亮或者有意义的gif。比如在demo中,我让一个人打着伞走路变成了云端漫步。您也可以实现自己的灵感。例如,如果滤镜中图标的位置合适,你可以给gif加水印等......你也可以从头开始制作一个gif(来自gifshot的能力):例如,你有几张图片在你的手,你想让它们看起来像gif,你可以设置间隔时间。或者你有一个视频,你想把它变成一个gif。或者你可以在电脑摄像头前做一个搞笑的表情,可以帮你制作一个gif表情包。演示预览(站点)*下面显示的动画大小约为10.5MB,加载速度可能很慢。也可以访问部署在github上的在线站点,打开速度更快,可以任意上传图片测试效果下载,或者去github上gitclone这个项目然后运行npmi&&npmrunstart支持esm,commonjs和umd第一步npmicolorful_gif第二步方法一:只需要将gifurl(比如https://xxx.gif)和filterurl(比如https://yyy.png)传给mixFilterToGIFfunction(一定要注意url必须允许跨域!)import{mixFilterToGIF}from"colorful_gif";//如果是commonjs环境,使用://const{mixFilterToGIF}=require("colorful_gif")//如果直接通过导入,可以直接使用://window.ColorfulGif.mixFilterToGIFmixFilterToGIF("xxx.gif","yyy.png")。then((newGIFDataURL)=>{//这里将打印出一个新的gif数据URLconsole.log(newGIFDataURL);//你可以用这个url做任何事情...});方法2:或者您可以将两个图像元素传递给mixFilterToGIF函数,见下文示例:假设您有如下HTML:您可以在JavaScript中执行此操作:import{mixFilterToGIF}from"colorful_gif";mixFilterToGIF(document.querySelector("#gif"),文档.querySelector("#filter")).then((newGIFDataURL)=>{//这将输出新的gif数据URLconsole.log(newGIFDataURL);//将此url提供给图像元素constresultImage=document.querySelector("#结果");resultImage.src=newGIFDataURL;});最后,id为result的img元素将显示一个带有过滤器的新gif。您还可以使用createGIF函数将多张图片、视频,甚至是电脑摄像头的录像转换成一张gif。createGIF派生自gifshot.createGIF。具体用法参考https://github.com/yahoo/gifshotimport{createGIF}from"colorful_gif";//createGIF来自gifshot.createGIF//关于gifshot,可以查看https://github.com/yahoo/gifshot总的来说,这个库非常好用,如果大家在业务上需要更多的配置,欢迎提issue。如果你觉得这个不错或者对我github上的其他项目感兴趣,就去给个star吧!:)colorful_gif