6 款 Javascript 的圖像處理庫

如果你正在尋找更高效的辦法來處理或操縱你 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-moran/jimp

<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/filtrr/tree/master/filtrr2

<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 也許可以選擇，因為它配備了一列表的花式效果，你可以嘗試一下。如下表這樣：

當然，你覺得這篇文章介紹的庫并不值得一看，那你也許對下面的更感興趣：

 

來自：https://juejin.im/entry/58c0f8122f301e006ba80891