像设计师一样处理图像，只需几行 JavaScript 代码！

如今，前端技术飞速发展，WebGL 已成为网页交互与视觉效果中不可或缺的重要组成部分。

今天，我要为大家推荐一款功能强大、上手简单 的 WebGL 图像特效库：glfx.js。它可以为普通图片添加多种酷炫滤镜效果，极大提升视觉表现力。

glfx.js 是什么？

glfx.js 是一个使用 WebGL 实现实时图像特效的 JavaScript 库。具有轻量、易用、性能高的特点。它主要由以下三个核心部分组成：

texture ：图像数据的原始来源，可以是 <img>、<canvas> 或 <video> 标签。
filter：图像特效，本质上是一个或多个 WebGL 着色器（shaders）。
canvas ：存储处理结果的图像缓冲区，也就是一个 WebGL 的 <canvas> 标签。

通过 glfx.js，开发者可以轻松实现亮度、对比度、饱和度调整、噪声添加、色调调整、景深模拟、镜头模糊、径向模糊、透视扭曲等多种丰富的图像特效。

官方文档地址： evanw.github.io/glfx.js/doc...

下面这张图展示了使用 glfx.js 实现的多种滤镜效果。第一张是原图，后面 8 张都是特效图：

glfx.js 的特色功能

以下为一些常用的滤镜效果介绍：

Brightness/Contrast：快速调整亮度和对比度。
Hue/Saturation：色相旋转和饱和度调整。
Lens Blur：模拟相机镜头模糊（虚化效果）。
Tilt Shift：模拟微缩景观效果，聚焦视野中心。
Vignette：在画面边缘加入渐变阴影，模拟镜头暗角。
Perspective：二维图片透视变换，使图片呈现 3D 效果。

除此之外，还有诸如噪点效果（Noise）、棕褐色（Sepia）、锐化蒙版（Unsharp Mask）、漩涡（Swirl）、径向模糊（Zoom Blur）等众多强大滤镜。

案例演示

glfx.js 文件下载

访问地址 evanw.github.io/glfx.js/glf... 下载库文件，并保存到你的项目中。

图片准备

HTML 示例代码

html 复制代码

<script src="glfx.js"></script>
<script>
  window.onload = function () {
    // 创建画布
    // 这里的 fx 是 glfx.js 的命名空间
    var canvas = fx.canvas();
    // 获取图片元素
    var image = document.getElementById("image");
    // 创建纹理
    var texture = canvas.texture(image);
    // 应用滤镜效果
    canvas.draw(texture).ink(0.25).update();
    // 将处理后的图像插入到页面中
    image.parentNode.insertBefore(canvas, image);
    // 删除原始图片
    image.parentNode.removeChild(image);
  };
</script>
<!-- 加载准备的图片 -->
<img id="image" src="./image.jpg" />

在这个例子中，我们使用了 glfx.js 内置的"墨水（Ink）"滤镜，只需几行代码，就能实现如下视觉效果：

现在我们将 canvas.draw(texture).ink(0.25).update(); 这段代码替换成

scss 复制代码

canvas.draw(texture).swirl(321, 263.5, 200, 3).update();

即可切换为"漩涡（Swirl）"特效：

你可以前往官方 DEMO 页面，尝试不同滤镜： evanw.github.io/glfx.js/dem... 在页面中更换不同效果后，可以看到对应的调用代码，复制粘贴到你的项目中即可轻松复用。

结语

glfx.js 适合用于实时图像处理应用，例如图片编辑器、在线设计工具、互动式艺术项目以及需要高级图像效果的网页应用。

如果你正在寻找一款能实现复杂图像效果，又易于集成的 JavaScript 库，glfx.js 无疑是最佳选择之一。