Image Processing in JAVAscript

如果您正在尋找一種在 Web 項目中處理或操作圖片的方法，本文則可能值得一看。它們中的大多數都提供基本操作，例如調整亮度和對比度，灰度以及反相和圖像，而其他操作主要側重于易于理解的代碼或可擴展性。以下部分將幫助您找出適合您要求的工具。

您可以在每個部分中找到用于調整圖像亮度的代碼段。這將使您了解如何使用這些庫。運行代碼的結果如下所示：

original and result image after increasing the brightness

1. Caman JS

一個眾所周知且功能強大的圖像處理庫是Caman.js。它提供了各種內置功能以及擴展的可能性。此外，該庫具有良好的文檔記錄，可以在NodeJS和瀏覽器中使用。CamanJS 提供的函數適用于<canvas>元素，因此在開始之前，您可以自己創建畫布元素，也可以讓 CamanJS 用相同尺寸的畫布替換圖像。

基本功能包括顏色操作，例如設置對比度/亮度或單獨修改RGB通道，以及增加或減少應用于圖像的噪點的可能性。高級操作，例如使用圖層，混合或裁剪圖像可以通過使用插件來實現。

<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是一個功能強大的工具，它提供了廣泛的功能。除了過濾器 2 和卡曼 JS 之外，它還與 WebGL 配合使用。關于這一點的很酷的事情是，圖像處理操作是使用圖形卡完成的，因此可以實時運行。主要缺點是它僅在較新的瀏覽器中受支持。

除了基本的調整功能和有趣的效果外，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不提供涉及更改圖像方向或大小的操作。

<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

與Caman.JS一樣，Jimp既可以在Node.JS中使用，也可以在瀏覽器中使用。它不使用 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>元素來處理圖像。雖然 Filtrr2 未涵蓋某些 CamanJS 操作，但它提供了一些附加功能，例如對圖像進行碼化或模糊處理。總而言之，所提供的功能和用法與CamanJS相似。

<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>