nodejs使用jimp实现图片处理

在开发中，图片处理是逃不开的一个问题。jimp插件可以非常方便的实现图片的一些常见操作。

安装

npm i jimp

jimp插件支持常见的图片格式：

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

基础用法

使用read方法把图片资源进行读取。读取之后可以使用jimp提供的API对图片做更多的操作。

const Jimp = require('jimp')
Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg')
  .then(image => {
    // Do stuff with the image.
  })
  .catch(err => {
    // Handle an exception.
  });

图片缩放

原图

333.jpeg

缩放之后

1586242326331_150x150.png

const Jimp = require('jimp');
async function resize() {
  // 读取图片
  const image = await Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg');
  // 缩小成150*150
  await image.resize(150, 150);
  // 写文件到本地
  await image.writeAsync(`./${Date.now()}_150x150.png`);
}
resize();

如果想保持图片的比例不变，可以设置宽度或者高度，然后另一个方向使用Jump.auto替代。

Crop裁剪

crop( x, y, w, h)
参数分别表示开始位置的x,y以及裁剪的宽和高

const Jimp = require('jimp');
// crop( x, y, w, h)
async function crop() {
  // 读取图片
  const image = await Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg');
  await image.crop(100, 100, 150, 150);
  // 保存
  await image.writeAsync(`test/${Date.now()}_crop_50x50.png`);
}
crop()

裁剪的结果

1586243164422_crop_150x150.png

Rotate旋转

rotate把图片旋转指定的角度。

const Jimp = require('jimp');
async function rotate() {
  // 读取图片
  const image = await Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg');
  await image.rotate(45);
  // 保存
  await image.writeAsync(`./${Date.now()}_rotate_150x150.png`);
}
rotate()

旋转结果

1586243392458_rotate_150x150.png

Opacity透明

const Jimp = require('jimp');
async function opacity() {
  // 读取图片
  const image = await Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg');
  await image.opacity(.5);
  // 保存
  await image.writeAsync(`./${Date.now()}_opacity_150x150.png`);
}
opacity()

透明效果

1586243562142_opacity_150x150.png

Grayscale变灰

const Jimp = require('jimp');
async function greyscale() {
  // 读取图片
  const image = await Jimp.read('https://s1.ax1x.com/2020/04/07/GgS7FA.jpg');
  await image.greyscale();
  // 保存
  await image.writeAsync(`./${Date.now()}_greyscale_150x150.png`);
}
greyscale()

效果

1586243693528_greyscale_150x150.png