6 款 Javascript 的图像处理库

文/ Tine
译/Mantra

附原文地址：http://blog.webkid.io/image-p...

若是你正在寻找更高效的办法来处理或操纵你 web 项目中的图片，那么这篇 blog 介绍的一些库，很值得你仔细阅读一下。这些库，大部分都提供了亮度、灰度、反转等调整操做，其余一部分则集中在可读性和易扩展性上。接下来的部分将帮助你了解并选择一款适合本身需求的工具。

你会从这里找到调整图片亮度的代码片断，这将提供给你如何使用库的 idea。运行代码（Source: flickr.com）的结果以下：



1.Caman JS

Caman JS 是大名鼎鼎的而且很是权威的图像处理库。它提供了各类内置功能以及各类扩展的可能性。此外，该库还提供了详细的文档，能够用于 NodeJS 和浏览器。

CamanJS 的函数使用<canvas>元素，因此开始以前，你能够本身建立一个 Canvas 元素，也可让 CamanJS 用相同尺寸的画布替换图像。

基本功能包含了，设置对比度/亮度或单独修改 RGB 通道以及增长或减小图像噪点，这样的色彩操做。更高级的操做，还有使用图层、复合或裁减图像能够经过插件来实现。

主页地址：http://camanjs.com/

<img id="caman-image" src="otter.jpg">
<script src="caman.js"></script>
<script>
Caman('#caman-image', function () {
  this.brightness(50).render();
});
</script>

2. glfx.js

像前两个库那样，glfx.js 是一个提供了普遍功能的强大工具。不一样于 Filtrr2 和 CamanJS，它遵照 WebGL 标准。很是赞的一点是，图像处理操做在显卡完成，所以能够实时运行。它主要的缺点是只支持最新版本的浏览器。

除了基本的调节功能和炫酷效果外，glfx.js 提供了（模糊和包装功能）的列表。这样能够经过调整不一样的参数来建立惟一的结果。

查看这个项目主页的 demo 而后下载这个库。

项目地址：http://evanw.github.io/glfx.js/

<script src="glfx.js"></script>
<script>
window.onload = function () {
    const canvas = fx.canvas();
    const image = document.getElementById('glfx-image');
    const texture = canvas.texture(image);
    canvas.draw(texture).brightnessContrast(0.5, 0).update();
    image.parentNode.insertBefore(canvas, image);
    image.parentNode.removeChild(image);
};
</script>
<img id="glfx-image" src="otter.jpg">

3．Grafi.js

正如在它项目主页上所说的，grafi.js 是一个鼓励用户去了解图像处理是如何工做的库。源代码能够在 github 找到，而且它里面的不少注释，能够帮助你理解每一个函数到底发生了什么。若是你在寻找一些提供更高级图像操做的库，也许 grafi.js 并不可以知足你的需求，但它可让你了解图像处理是如何执行而后获得满意效果的。

注意，涉及改变图像的方向或大小的操做不是由 grafi.js 提供的。

https://github.com/grafijs/grafi

<canvas id="grafi-canvas"></canvas>
<script type="text/javascript" src="grafi.js"></script>
<script>
  const grafiCanvas = document.getElementById('grafi-canvas')
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  let original, newImage, imageCtx
  let img = new Image()
  img.src = 'otter.jpg';

  img.onload = function () {
    canvas.width = img.width
    canvas.height = img.height
    ctx.drawImage(img, 0, 0)
    original = ctx.getImageData(0,0, canvas.width, canvas.height)

    grafiCanvas.width = img.width
    grafiCanvas.height = img.height
    imageCtx = grafiCanvas.getContext('2d')
    imageCtx.putImageData(grafi.brightness(original, {level: 100}), 0, 0)
  }
</script>

4. Jimp

像 CamanJS 同样，能够用于 NodeJS 和浏览器中，他不须要使用 HTML 元素（<img>或者<canvas>）,但须要从路径或URL读取图像。

Jimp 提供了颜色调节和一些效果的函数清单。固然也提供了一些你可能在其余库错过的操做，好比调整尺寸，缩放以及旋转图像。图片也能够手动或自动裁减。在 Node 中使用，Jimp 则是一个很是强大的工具，可让你在多个文件上执行连接操做，并储存修改的图像。

https://github.com/oliver-mor...

<script src="jimp.min.js"></script>
<script>
  Jimp.read('otter.jpg').then(function (lenna) {
    lenna.brightness(0.5)
      .getBase64(Jimp.MIME_JPEG, function (err, src) {
        const img = document.createElement('img');
        img.setAttribute('src', src);
        document.body.appendChild(img);
      });
    }).catch(function (err) {
      console.error(err);
    });
</script>

5. Filtrr2

Filtrr2 是一个基于jQuery 的被描述为「开箱即用」的库。它使用<canvas>来操做图像。CamanJS 的功能并无被 Filtrr2 彻底包含，他还提供了一些其余的功能如（海报已经模糊图像）。Filtrr2提供的全部这些功能和用法与CamanJS 很类似。

虽然 Fitlrr2 是很强悍的库，但github库一段时间内并无及时更新了。
项目地址：https://github.com/alexmic/fi...

<script type="text/javascript" src="jquery.min.js"/></script>
<script src="filtrr2.js"></script>

<img id="filtrr2-img" src="otter.jpg"/>
<script>
  Filtrr2('#filtrr2-img', function () {
    this.brighten(50).render();
  });
</script>

6. Processing.js

若是你熟悉Processing编程语言，这个库可能会派上用场。Processing 容许使用不一样的媒介，用于建立动画片，数字形象和数字艺术，也能够用于图像处理。

Processing.js 可让你编写 Processing 代码并经过应用 canvas 元素简单的包含你的网站。

虽然库提供了一些有用的功能，例如缩放、旋转或图像混合，但用于基本操做的解决方案必须由用户实现，例如灰度和颜色的调整。从正面的角度看，他是一个可灵活调整以及一个很好的了解图像处理算法的途径。

这里有不少示例和详细的步骤来帮助你开始：http://processingjs.org/


综述

总的来看一下这些库所提供的功能，以下表：

正如你看到的，CamanJS 提供了多种多样的像素修饰以及用于修改图片的操做。如模糊和锐化等一些操做，只有别的库提供，那你就必须根据本身到底想作什么来作取舍了。
此列表中惟一支持翻转和自动剪裁的库就是 Jimp。若是你只想调整大小或剪裁图片，那么 CamanJS 和 Jimp 均可以选择。

若是你正在寻找更多抽象的操做，glfx.js 也许能够选择，由于它配备了一列表的花式效果，你能够尝试一下。以下表这样：

固然，你以为这篇文章介绍的库并不值得一看，那你也许对下面的更感兴趣：

• PaintbrushJS

• Canvasfilters

• VintageJS

• jQuery filter.me

• JSManipulate

• Fabric.js