乐趣区

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

jiezi

这是一个能够把滤镜图片混合进 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.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。

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

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

退出移动版