6 款 Javascript 的圖像處理庫

文/ 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 也許能夠選擇,由於它配備了一列表的花式效果,你能夠嘗試一下。以下表這樣:
圖片描述

固然,你以爲這篇文章介紹的庫並不值得一看,那你也許對下面的更感興趣:

相關文章
相關標籤/搜索