Top5图像处理JS库

NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - AI模型在线查看 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割 - 3D道路快速建模

图像处理库 (IML) 用于对图像执行各种处理功能：你可以增加图像的亮度、添加饱和度或滤镜、裁剪和调整大小，以及更多有价值的功能，这些功能将帮助你完成几乎所有事情并将你的网络浏览器变成 Adob​​e Lightroom！

我们为每项重要的图像处理任务都提供了库，从简单的低级操作（例如滤镜、亮度和饱和度）到用于裁剪或图像合成的单一用途库。最后，我们进入了图像测试领域，因为没有可靠的方法来测试结果，任何图像处理应用程序都是不完整的。

1、Sharp

Sharp 是一个高性能 Node.js 图像处理库，用于调整不同图像格式（如 JPEG、PNG、WebP、AVIF、SVG 和 TIFF）的大小。此高速 Node.js 模块的典型用例是将标准格式的大图像转换为较小的、适合网络的图像。

只有当你想调整大型文件或多种文件的大小时，Sharp 才有用。另一方面，如果你只想调整单个小图像的大小，那么可能不应该使用它。相反，普通的 HTML 和原生 JavaScript 会更有用。Sharp 充分利用了多个 CPU 核心和 L1/L2/L3 缓存，让你可以更快地调整和压缩图像。

用例

我用它来调整整个 NFT 集合的大小，大小超过 80Gb，压缩后大约为 10Gb。所以，如果你想使用它来调整几张大图像的大小，那么它是你的最佳选择 - 你将以最快、最有效的方式完成它。

示例

你可以使用以下命令安装此库：

npm install sharp

使用 sharp 调整图像大小的方法如下：

const sharp = require('sharp');
const fs = require('fs');

sharp('yellow.png')
    .rotate(180)
    .resize(200)
    .toBuffer()
    .then( data => {
        fs.writeFileSync('yellow.png', data);
    })
    .catch( err => {
        console.log(err);
    });

2、Cropper.js

Cropper.js 是另一个流行的图像处理 JavaScript 库。你可以使用它以各种可能的方式裁剪图像、更改纵横比、旋转、缩放和处理画布数据。Cropper.js 是裁剪的正确选择，无需任何额外功能。

用例

你可以使用其灵活的 API 在你的 Web 应用中创建自定义图像裁剪 UI，让你的用户可以将照片调整为正确的大小和纵横比。它将更加高效，因为它几乎不需要任何东西，没有任何无用的功能，并且非常适合裁剪！

示例

可以使用以下命令安装此库：

npm install cropperjs

import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

查看 Cropper.js 演示，单击要应用于图像的任何属性并立即查看结果。

有关如何将图像裁剪添加到 React 应用的详细指南，请查看使用 react-image-crop 的指南。

3、合并图像

使用画布可能有点乏味，尤其是当你需要画布上下文来执行相对简单的事情（例如合并几张图像）时。Merge Images将所有重复任务抽象为简单的函数调用。它是 Canvas API 的包装器，抽象了其低级函数，这使得这项特定任务变得容易得多。你还可以创建参数，例如定位、不透明度等。你可以在 GitHub 上的文档中找到它们。

用例

这是一个有价值的库，可以帮助完成多项任务。例如，你可以生成一个 NFT 集合，你可以在其中合并所有组件以获得一套完整的变体。或者你会发现这个库对个人使用很有帮助，例如，组合几张不同的图像来生成拼贴画。

示例

安装库本身：

npm install --save merge-images

然后可以使用此代码生成一个简单的图像：

//write this inside of your javascript file

import mergeImages from 'merge-images';

mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64 => document.querySelector('img').src = b64);

//And that would update the img element to show this image:

在这里，我用它来合并几个组件来创建最终的变体（这里我使用了背景、角色、喇叭、情感和配件）：

4、LooksSame

LooksSame 是一个用于比较图像的库。如果你上传的两张图片是重复的，该库会通知你。你所要做的就是提供想要比较的图片的链接。LooksSame 严格来说不是一个图像处理库，但对测试很有帮助。

用例

你可以使用这个库并编写代码来实现自动化和循环周期，以搜索目录并比较每对图像是否存在重复。此外，你还可以删除这些重复项并自动执行此过程。如果经常使用包含大量图像的 ML 算法，那么这是一个很棒的库。

示例

要开始比较图像，只需使用以下命令安装它：

npm i looks-same

在这里，你可以看到如何使用 Jest 测试这个库：

var looksSame = require('looks-same');

//Parameters can be paths to files or buffer with compressed png image

test('image1 and image2 are the same', async () => {
	expect(looksSame('image1.png', 'image2.png')).toBe(true);
});

//Result will be "image1 and image2 are the same" if they are the same

5、Jimp

Jimp 代表 JavaScript 图像处理程序，它允许你以几乎所有可能的方式编辑图像。有了它，你可以反转图像、添加一些文本、调整大小、使用像素化、克隆图像、模糊图像、反转颜色，以及其他一些很酷的功能，这些功能将提高应用程序的图像处理能力。

用例

使用 Jimp，你可以构建 Web 应用程序，在其中几乎可以以任何可能的方式编辑和处理图像。裁剪、调整大小、旋转和过滤功能让你可以创建自己的照片编辑器并在其上添加界面。

示例

以下是尝试这个优秀库的 JavaScript 代码。有一个异步函数，你可以在其中看到许多类型的属性，你可以轻松更改这些属性。例如添加文本、调整图像大小、模糊图像等。要使用其中至少一个，你只需要取消注释需要的部分，然后程序就可以运行了！

// Import dependencies
const Jimp = require("jimp");

(async function () {

    // Read the image
    const image = await Jimp.read("images/shapes.png"); // <http://www.example.com/path/to/lenna.jpg>

    // // Add text
    //  const font = await Jimp.loadFont(Jimp.FONT_SANS_16_WHITE); // bitmap fonts
    //  image.print(font, 0, 0, 'Hello world!'); // <https://github.com/libgdx/libgdx/wiki/Hiero>

    //  // Resize the image 
    //  // Resize the image to 250 x 250
    //  image.resize(250, 250);

    //  // Resize the height to 250 and scale the width accordingly
    //  image.resize(Jimp.AUTO, 250);

    //  // Resize the width to 250 and scale the height accordingly
    //  image.resize(250, Jimp.AUTO);

    //  // Add a sepia wash to the image
    //  image.sepia();

    //  // Pixelation 
    //  image.pixelate(5);
    //  image.pixelate(5, 50, 50, 190, 200); pixe,x, y, w, h 

    //  // Clone
    //  const image2 = image.clone();

    //  // Blur the image
    //  image.gaussian(1);
    //  image.blur(1);

    //  // Inverts the image
    //  image.invert(); 

    //  // Set the brightness
    //  image.brightness( 0.5 ); // -1 to +1

    //  // Resize the image
    //  image.resize(256, 256);

    //  // Set the quality
    //  image.quality(100);

    //  // Convert to grayscale
    //  image.greyscale();

    // Save the image
    image.write("images/edited-shapes.png"); // writeAsync

})();

PS：不要忘记取消注释你想要使用的效果，然后保存文件。:)

正如你在此处看到的，我模糊了所有内容并反转了之前向你展示的图像的颜色，得到了以下结果：

原文链接：Top 5 Open Source JavaScript Image Manipulation Libraries

BimAnt翻译整理，转载请标明出处