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>

6. Processing.js
如果您熟悉处理编程语言，此库可能会派上用场。处理允许使用不同的媒体，可用于创建动画，数据可视化和数字艺术，但也可用于图像处理。Processing.js允许您编写处理代码，并通过将其应用于画布元素将其包含在您的网站中即可。

尽管该库提供了一些有用的功能，例如缩放，旋转或混合图像，但灰度缩放或颜色调整等基本操作的解决方案必须由用户实现。从好的方面来说，它是高度可调的，是了解图像处理算法的好方法。

总结概述

对比如下

如您所见，CamanJS提供了各种各样的像素级修改以及可用于图像校正的操作。但是，某些操作（如模糊和锐化）仅受其他库支持，因此您必须根据自己想要执行的操作进行选择。

此列表中唯一支持旋转、翻转和自动裁剪的库是 Jimp。如果您只想调整图像大小或裁剪图像，则可以同时使用CamanJS或Jimp。

如果您正在寻找更抽象的不透明，glfx.js可能是可供选择的库，因为它带有一系列您可以玩的花哨效果，如下图所示。

当然，本文中介绍的库并不是唯一值得一看的库，您可能也有兴趣查看其中之一：

• PaintbrushJS
• canvasfilters
• VintageJS
• jQuery filter.me
• JSManipulate
• Fabric.js