JIMP图像处理入门

JIMP消除了在存储前将图像调整到给定尺寸所需的模板代码，或者为图像添加水印以达到品牌推广的目的。

Node.js和JIMP图像处理入门

在Node.js应用程序中，Javascript图像处理程序（或JIMP）使我们更容易处理图像，以实现我们想要的任何设计。

JIMP提供了对图像进行裁剪、调整大小、模糊和添加效果的功能。

前提条件

要跟上本教程的进度--读者应该具备以下条件。

1. 在你的电脑上安装[Node.js]。
2. 对[Javascript]的了解。

项目设置

1. 创建一个名为image-processing 的项目目录。

2. 在上面创建的文件夹中，运行下面的命令，在我们的项目目录中初始化Node.js。

   $ npm init
   

3. 运行下面的命令，将JIMP 包添加到我们的应用程序中。

   $ npm install --save jimp
   

4. 在项目目录中创建一个名为index.js 的文件。

图像编辑

支持的图像格式

JIMP支持几种图像格式，包括。

• @jimp/jpeg
• @jimp/png
• @jimp/bmp
• @jimp/tiff
• @jimp/gif

读取图像

JIMP是建立在回调和基于承诺的APIS上，用于图像操作。我们使用JIMP的静态方法jimp. read 来读取要处理的图像。jimp. read 需要一个图像路径作为输入。

jimp. read 图像输入可以是。

1. 图片的URL。
2. 文件系统中的图像路径。

下面的代码片断演示了如何在JIMP中读取图像。

Jimp.read('https://images.pexels.com/photos/4629485/pexels-photo-4629485.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260')
  .then(image => {
    // Process the image
  })
  .catch(err => {
    // Handle exceptions.
  });

调整图像的大小

JIMP使用双通道双线性算法，通过其resize() 方法来调整图像的宽度和高度。

图像大小调整的语法。

resize( w, h[, mode] )

将下面的代码片段添加到index.js 文件中。

const Jimp = require('jimp');
async function resize() {
  // reads the image
  const image = await Jimp.read('https://images.pexels.com/photos/4629485/pexels-photo-4629485.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
  // resizes the image to width 150 and heigth 150.
  await image.resize(150, 150);
  // saves the image on the file system
  await image.writeAsync(`resize_${Date.now()}_150x150.png`);
}
resize();

原始图像。

调整后的图像。

Jimp. AUTO 可以在高度或宽度的地方传递，以调整图像的大小，同时保持长宽比。 ，每次只能传递高度或宽度。Jimp. AUTO

只要没有传递调整大小的算法，JIMP就会应用Jimp.RESIZE_BILINEAR 算法。

JIMP 中可用的其他调整大小的算法包括。

• Jimp.RESIZE_BEZIER
• Jimp.RESIZE_BICUBIC
• Jimp.RESIZE_NEAREST_NEIGHBOR
• Jimp.RESIZE_HERMITE

裁剪图像

JIMP 有一个resize() 方法，将图像裁剪到指定的x 和y 坐标。

语法。

crop( x, y, w, h)

将下面的代码片段添加到index.js 文件中。

async function crop() {
  // reads the image
  const image = await Jimp.read('https://images.pexels.com/photos/4629485/pexels-photo-4629485.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
  // crops the image
  await image.crop(500, 500, 150, 150);
  // Saves the image to the file system
  await image.writeAsync(`${Date.now()}_crop_150x150.png`);
}
crop()

裁剪的图像。

旋转图像

JIMP 提供了一个rotate() 方法，可以用来将图像旋转到提供的角度，同时保持图像的尺寸。

语法。

rotate( deg[, mode] );

将下面的代码片段添加到index.md 文件中。

async function rotate() {
  // reads the image
  const image = await Jimp.read('https://images.pexels.com/photos/4629485/pexels-photo-4629485.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
  // rotates the image
  await image.rotate(45);
  // Saves the image into the file system
  await image.writeAsync(`${Date.now()}_rotate_150x150.png`);
}
rotate()

旋转的图像。

模糊图像

JIMP 使用模糊算法，通过给定的x 像素来模糊一个图像。JIMP 提供了blur() 方法，用于接收模糊的像素。

语法。

blur(r)

将下面的代码片段添加到index.js 文件中。

async function blur() {
  // reads the image
  const image = await Jimp.read('https://images.pexels.com/photos/4629485/pexels-photo-4629485.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
  // blurs the image with the given number of pixels
  await image.blur(20);
  // Saves the image into the disk
  await image.writeAsync(`${Date.now()}_blur_150x150.png`);
}
blur()

模糊的图像。

添加一个图像叠加

JIMP 提供了一个composite() 方法，在x 和y 的位置上，在另一个图像上添加一个图像。

语法。

composite( src, x, y, [{ mode, opacitySource, opacityDest }] ); 

将下面的代码片段添加到index.md 文件中。

async function waterMark(waterMarkImage) {
  // reads the watermark image
  let  watermark = await Jimp.read(waterMarkImage);
  // resizes the watermark image
  watermark = watermark.resize(300,300);
  // reads the image
  const image = await Jimp.read('https://images.pexels.com/photos/4629485/pexels-photo-4629485.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
  //adds the watermark to the image at point 0, 0
 watermark = await watermark
  image.composite(watermark, 0, 0, {
    mode: Jimp.BLEND_SOURCE_OVER,
    opacityDest: 1,
    opacitySource: 0.5
  })
  //Saves the image into the file system
  await image.writeAsync(`test/${Date.now()}_waterMark_150x150.png`);
}
waterMark('https://destatic.blob.core.windows.net/images/nodejs-logo.png');

加水印的图像。

运行程序

1. 在终端上，导航到项目目录。
2. 执行下面的命令来运行我们的程序。

   $ node index.js

总结

现在你已经学会了如何在Node.js应用程序中使用JIMP，使用JIMP给用户上传到你的Node.js应用程序的图片添加水印。