gif和滤镜会碰撞出怎样的火花（写了一个可以混合gif和滤镜的库） gif和滤镜会碰撞出怎样的火花

这是一个可以把滤镜图片混合进 gif 的库，它会返回一个新的 gif dataURL 业务来源当然是来自伟大的产品经理。那段时间产品提了一个调研需求，想看看前端能不能给gif合成滤镜。经过几天的忙碌，就得到这样一个产物，除了帧率可能有些许偏差，其他都是可以满足的！总体思路就是先将gif拆解成一帧帧图片，然后和滤镜合成，最后再合成为一个新的gif输出。后来想着这个东西可以推广开，就算大家在业务上可能很少用到（除非你在一个经常和图片处理打交道的公司），当成一个玩具也不错，于是就在 github 和 npm 上开源了。
提供了一个在线站点可以试用。
应用场景 【gif和滤镜会碰撞出怎样的火花（写了一个可以混合gif和滤镜的库）】你可以通过它生成很多好看或有意义的gif。比如在Demo中我就让一个撑伞走路的人，变成了在云中漫步。你也可以实现自己的灵感。比如如果滤镜中的icon位置合适的话，就可以做到给gif打水印等等……
Demo 预览(站点) * 下面演示的动图大小大约有10.5MB，可能加载的很慢。你还可以访问部署于github的在线站点，它可以更快打开并且可以任意上传图片来测试效果，或者去github git clone 本项目然后运行 npm i && npm run start

使用

支持 esm 、commonjs 和 umd

第一步

npm i colorful_gif

第二步
方式 1:
你只需要向 mixFilterToGIF 函数分别传 gif url（例如 https://xxx.gif）和滤镜 url（例如 https://yyy.png）就可以了（务必注意 url 必须允许跨域！）

import { mixFilterToGIF } from "colorful_gif"; // 如果你在commonjs环境，使用： // const { mixFilterToGIF } = require("colorful_gif") // 如果你直接通过引入, 可以直接使用： // window.ColorfulGif.mixFilterToGIFmixFilterToGIF("xxx.gif", "yyy.png").then((newGIFDataURL) => { // 这里会打印出一个新的 gif dataURL console.log(newGIFDataURL); // 你可以用这个url做任何事情…… });

方式 2:
或者你可以给 mixFilterToGIF 函数传入两个 image 元素，请看下面的例子：
假设你有一个像下面这样的 HTML：

文章图片文章图片文章图片

你可以在 JavaScript 里面这样做：

import { mixFilterToGIF } from "colorful_gif"; mixFilterToGIF( document.querySelector("#gif"), document.querySelector("#filter") ).then((newGIFDataURL) => { // this will output new gif dataURL console.log(newGIFDataURL); // give this url to an image element const resultImage = document.querySelector("#result"); resultImage.src = https://www.it610.com/article/newGIFDataURL; });

最后，id 为 result 的 img 元素会展示新的带有滤镜的 gif。
总的来说，这个库使用起来非常简单，如果有人在业务中需要更多配置欢迎提issue。
如果你感觉这个不错或者对我github上其他项目感兴趣的话，去给个star呗！ :) colorful_gif