文/ Tine
譯/Mantra
附原文地址：blog.webkid.io/image-proce…
如果你正在尋找更高效的辦法來處理或操縱你 web 專案中的圖片，那麼這篇 blog 介紹的一些庫，很值得你仔細閱讀一下。這些庫，大部分都提供了亮度、灰度、反轉等調整操作，其他一部分則集中在可讀性和易擴充套件性上。接下來的部分將幫助你瞭解並選擇一款適合自己需求的工具。
你會從這裡找到調整圖片亮度的程式碼片段，這將提供給你如何使用庫的 idea。執行程式碼（Source: flickr.com）的結果如下：
1.Caman JS
Caman JS 是大名鼎鼎的並且非常權威的影像處理庫。它提供了各種內建功能以及各種擴充套件的可能性。此外，該庫還提供了詳細的文件，可以用於 NodeJS 和瀏覽器。
CamanJS 的函式使用<canvas>元素，所以開始之前，你可以自己建立一個 Canvas 元素，也可以讓 CamanJS 用相同尺寸的畫布替換影像。
基本功能包含了，設定對比度/亮度或單獨修改 RGB 通道以及增加或減少影像噪點，這樣的色彩操作。更高階的操作，還有使用圖層、複合或裁減影像可以通過外掛來實現。
主頁地址：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 然後下載這個庫。
<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 提供的。
<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 則是一個非常強大的工具，可以讓你在多個檔案上執行連結操作，並儲存修改的影像。
<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庫一段時間內並沒有及時更新了。
專案地址：github.com/alexmic/fil…
<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 元素簡單的包含你的網站。
雖然庫提供了一些有用的功能，例如縮放、旋轉或影像混合，但用於基本操作的解決方案必須由使用者實現，例如灰度和顏色的調整。從正面的角度看，他是一個可靈活調整以及一個很好的瞭解影像處理演算法的途徑。
這裡有很多示例和詳細的步驟來幫助你開始：processingjs.org/
綜述
總的來看一下這些庫所提供的功能，如下表：
正如你看到的，CamanJS 提供了多種多樣的畫素修飾以及用於修改圖片的操作。如模糊和銳化等一些操作，只有別的庫提供，那你就必須根據自己到底想做什麼來做取捨了。
此列表中唯一支援翻轉和自動剪裁的庫就是 Jimp。如果你只想調整大小或剪裁圖片，那麼 CamanJS 和 Jimp 都可以選擇。
如果你正在尋找更多抽象的操作，glfx.js 也許可以選擇，因為它配備了一列表的花式效果，你可以嘗試一下。如下表這樣：
當然，你覺得這篇文章介紹的庫並不值得一看，那你也許對下面的更感興趣：
本文對你有幫助？歡迎掃碼加入前端學習小組微信群：
