这是一个能够把滤镜图片混合进 gif 的库，它会返回一个新的 gif dataURL

业务起源

当然是来自平凡的产品经理。那段时间产品提了一个调研需要，想看看前端能不能给gif合成滤镜。通过几天的繁忙，就失去这样一个产物，除了帧率可能有些许偏差，其余都是能够满足的！总体思路就是先将gif拆解成一帧帧图片，而后和滤镜合成，最初再合成为一个新的gif输入。起初想着这个货色能够推广开，就算大家在业务上可能很少用到（除非你在一个常常和图片解决打交道的公司），当成一个玩具也不错，于是就在 github 和 npm 上开源了。

提供了一个在线站点能够试用。

利用场景

你能够通过它生成很多难看或有意义的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")// 如果你间接通过 <script src="**/colorful_gif.min.js" /> 引入, 能够间接应用：// window.ColorfulGif.mixFilterToGIFmixFilterToGIF("xxx.gif", "yyy.png").then((newGIFDataURL) => {  // 这里会打印出一个新的 gif dataURL  console.log(newGIFDataURL);  // 你能够用这个url做任何事件……});

形式 2:

或者你能够给 mixFilterToGIF 函数传入两个 image 元素，请看上面的例子：

假如你有一个像上面这样的 HTML：

<img id="gif" src="https://xxx.gif" /><img id="filter" src="https://xxx.png" /><img id="result" src="" />

你能够在 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 = newGIFDataURL;});

最初，id 为 result 的 img 元素会展现新的带有滤镜的 gif。

总的来说，这个库应用起来非常简单，如果有人在业务中须要更多配置欢送提issue。

如果你感觉这个不错或者对我github上其余我的项目感兴趣的话，去给个star呗！ :) colorful_gif