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

这是一个可以把滤镜图片混合进 gif 的库，它会返回一个新的 gif dataURL。你还可以使用额外导出的 createGIF 方法把多张图片、视频、甚至电脑摄像头的实时录制转成 gif。

业务来源

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

提供了一个在线站点可以试用。

喜欢的话给个star吧：github/colorful_gif

应用场景

你可以通过它生成很多好看或有意义的gif。比如在Demo中我就让一个撑伞走路的人，变成了在云中漫步。你也可以实现自己的灵感。比如如果滤镜中的icon位置合适的话，就可以做到给gif打水印等等……

你也可以从零开始制作 gif（来自gifshot的能力）：

比如你手里头有数张图片，你希望它们像 gif 一样动起来，并且可以设置间隔时间。或者你有一个视频，你希望它能变成 gif。再或者你可以在电脑摄像头面前做一个搞怪表情，它可以帮你制成 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.mixFilterToGIF

mixFilterToGIF("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。

---

你还可以利用 createGIF 函数把多张图片、视频、甚至电脑摄像头的录制转换成 gif。createGIF 来源于 gifshot.createGIF。具体用法请参考 https://github.com/yahoo/gifshot

import { createGIF } from "colorful_gif";

// createGIF comes from gifshot.createGIF
// About gifshot, you can view https://github.com/yahoo/gifshot

---

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

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