文/ Tine
譯/Mantrajavascript
附原文地址:http://blog.webkid.io/image-p...java
若是你正在尋找更高效的辦法來處理或操縱你 web 項目中的圖片,那麼這篇 blog 介紹的一些庫,很值得你仔細閱讀一下。這些庫,大部分都提供了亮度、灰度、反轉等調整操做,其餘一部分則集中在可讀性和易擴展性上。接下來的部分將幫助你瞭解並選擇一款適合本身需求的工具。jquery
你會從這裏找到調整圖片亮度的代碼片斷,這將提供給你如何使用庫的 idea。運行代碼(Source: flickr.com)的結果以下:
1.Caman JSgit
Caman JS 是大名鼎鼎的而且很是權威的圖像處理庫。它提供了各類內置功能以及各類擴展的可能性。此外,該庫還提供了詳細的文檔,能夠用於 NodeJS 和瀏覽器。github
CamanJS 的函數使用<canvas>元素,因此開始以前,你能夠本身建立一個 Canvas 元素,也可讓 CamanJS 用相同尺寸的畫布替換圖像。web
基本功能包含了,設置對比度/亮度或單獨修改 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.jscanvas
像前兩個庫那樣,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 也許能夠選擇,由於它配備了一列表的花式效果,你能夠嘗試一下。以下表這樣:
固然,你以爲這篇文章介紹的庫並不值得一看,那你也許對下面的更感興趣: