JavaScript的图像处理库介绍 _JavaScript

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=https://www.isolves.com/it/cxkf/yy/js/2022-11-01/"otter.jpg" />2. glfx.jsglfx.js是一个功能强大的工具，它提供了广泛的功能。除了过滤器 2 和卡曼 JS 之外，它还与 WebGL 配合使用。关于这一点的很酷的事情是，图像处理操作是使用图形卡完成的，因此可以实时运行。主要缺点是它仅在较新的浏览器中受支持。
除了基本的调整功能和有趣的效果外，glfx.js还提供了模糊和包装功能的列表。这些可以通过不同的参数进行调整，以创建独特的结果

【JavaScript的图像处理库介绍】<script src=https://www.isolves.com/it/cxkf/yy/js/2022-11-01/"glfx.js">3. Grafi.js正如该项目网站上所说，grafi.js是一个应该鼓励用户了解图像处理如何工作的图书馆。源代码可以在github上找到，并且包含许多注释，可以很容易地理解每个函数中发生了什么。如果您正在寻找可用于高级图像操作的库，grafi.js可能不符合您的需求，但它有助于了解如何实现图像操作并为基本操作获得令人满意的结果。
请注意，grafi.js不提供涉及更改图像方向或大小的操作。

<canvas id="grafi-canvas"></canvas><script type="text/JavaScript" src=https://www.isolves.com/it/cxkf/yy/js/2022-11-01/"grafi.js">

4. Jimp与Caman.JS一样，Jimp既可以在Node.JS中使用，也可以在浏览器中使用。它不使用 html 元素（<img> 或 <canvas>），而是在图像中读取以进行处理的路径或 URL 。
Jimp提供了一个调整颜色的功能列表以及一些效果。它还提供了一些您在其他库中可能错过的操作，例如调整大小，缩放和旋转图像。图片也可以手动或自动裁剪。在 Node 中使用时，Jimp 是一个功能强大的工具，可让您对多个文件执行链接操作并存储修改后的图像。
<script src=https://www.isolves.com/it/cxkf/yy/js/2022-11-01/"jimp.min.js">5. Filtrr2Filtrr2被描述为一个“易于使用的开箱即用”库，这取决于jQuery 。它使用<canvas>元素来处理图像。虽然 Filtrr2 未涵盖某些 CamanJS 操作，但它提供了一些附加功能，例如对图像进行码化或模糊处理。总而言之，所提供的功能和用法与CamanJS相似。