6 款 Javascript 的圖像處理庫

時間 2019-11-08

原文原文鏈接

文/ Tine
譯/Mantrajavascript

附原文地址：blog.webkid.io/image-proce…前端

若是你正在尋找更高效的辦法來處理或操縱你 web 項目中的圖片，那麼這篇 blog 介紹的一些庫，很值得你仔細閱讀一下。這些庫，大部分都提供了亮度、灰度、反轉等調整操做，其餘一部分則集中在可讀性和易擴展性上。接下來的部分將幫助你瞭解並選擇一款適合本身需求的工具。java

你會從這裏找到調整圖片亮度的代碼片斷，這將提供給你如何使用庫的 idea。運行代碼（Source: flickr.com）的結果以下：
jquery

1.Caman JS

Caman JS 是大名鼎鼎的而且很是權威的圖像處理庫。它提供了各類內置功能以及各類擴展的可能性。此外，該庫還提供了詳細的文檔，能夠用於 NodeJS 和瀏覽器。git

CamanJS 的函數使用<canvas>元素，因此開始以前，你能夠本身建立一個 Canvas 元素，也可讓 CamanJS 用相同尺寸的畫布替換圖像。github

基本功能包含了，設置對比度/亮度或單獨修改 RGB 通道以及增長或減小圖像噪點，這樣的色彩操做。更高級的操做，還有使用圖層、複合或裁減圖像能夠經過插件來實現。web

主頁地址：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 提供了（模糊和包裝功能）的列表。這樣能夠經過調整不一樣的參數來建立惟一的結果。canvas

查看這個項目主頁的 demo 而後下載這個庫。

項目地址：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 提供的。

github.com/grafijs/gra…

<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 則是一個很是強大的工具，可讓你在多個文件上執行連接操做，並儲存修改的圖像。

github.com/oliver-mora…

<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>複製代碼