node 使用 jimp 实现图片去水印和加水印

在Node.js中去除图片水印的一个常见方法是使用Jimp库，它是一个用于图像处理的纯JavaScript库。使用Jimp库，我们可以很方便地对图片进行剪切、缩放、旋转、反转、添加滤镜等操作。我们这里重点将用它来实现添加水印和去水印的功能。

jimp 支持的图片类型有： image/jpeg，image/png，image/bmp，image/gif，image/tiff，其他类型的请另寻他法。

安装

npm install jimp

打开&保存图像

Jimp允许你打开图像文件，进行编辑，然后保存。例如：

Jimp.read('input.jpg')
  .then(image => {
    // 在这里进行编辑
    return image
      .resize(300, 200)
      .quality(60)
      .write('output.jpg');
  })
  .catch(err => {
    console.error(err);
  });

Jimp操作通常是异步的，所以你需要使用Promises或async/await来处理它们，以确保在图像处理完成后执行其他操作。

编辑图像

这里只介绍去除水印和添加水印，使用其他功能请自行查阅 Jimp 文档。

去水印

大致思路就是首先读取原图和水印图，并通过获取它们的宽高及缩放比例来对水印图进行缩放。然后，使用composite()方法将水印图绘制到原图上，并指定合成模式和不透明度。最后，将处理后的图片保存。

示例代码如下：

const Jimp = require('jimp');
 
// 读取原图
Jimp.read('source.png').then(image => {
  // 读取水印图
  Jimp.read('watermark.png').then(watermark => {
    // 获取原图和水印图的宽高
    const width = image.bitmap.width;
    const height = image.bitmap.height;
    const wmWidth = watermark.bitmap.width;
    const wmHeight = watermark.bitmap.height;
 
    // 计算水印宽高缩放比例
    const scale = width / wmWidth;
 
    // 缩放水印图
    watermark.scale(scale);
 
    // 将水印图绘制到原图上
    image.composite(watermark, 0, 0, {
      mode: Jimp.BLEND_SOURCE_OVER,
      opacitySource: 1,
      opacityDest: 1
    });
 
    // 保存处理后的图片
    image.write('result.png');
  });
});

加水印

不同类型的图片，添加水印的方法不同。

jpg 与 png 图片水印

水印代码如下：

const Jimp = require('jimp');

// 需要添加的水印图片路径
const ORIGINAL_IMAGE = './img/test.jpg';

// 水印logo路径
const LOGO = './img/logo.png';

// 水印距离右下角百分比
const LOGO_MARGIN_PERCENTAGE = 5 / 100;

const main = async () => {
const [image, logo] = await Promise.all([
    Jimp.read(ORIGINAL_IMAGE),
    Jimp.read(LOGO)
  ]);

// 将 logo 等比缩小 10 倍
// logo.resize(inputGif.width / 10, Jimp.AUTO);

const xMargin = image.bitmap.width * LOGO_MARGIN_PERCENTAGE;
const yMargin = image.bitmap.width * LOGO_MARGIN_PERCENTAGE;

const X = image.bitmap.width - logo.bitmap.width - xMargin;
const Y = image.bitmap.height - logo.bitmap.height - yMargin;

return image.composite(logo, X, Y, [
  {
    mode: Jimp.BLEND_SOURCE_OVER,
    opacitySource: 0.1,
    opacityDest: 1
  }
 ]);
};

main().then(image => {
  const FILENAME = 'new_name.' + image.getExtension();

  // 压缩图片 0-100
  image.quality(80);

  return image.write(FILENAME, (err) => {
    if (err) {
      return console.error(err);
    };
    console.log('水印成功：', FILENAME);
  });
});

git图片水印