Node.js 水印图片 - JavaScript

在图像处理中，水印图片是指在原始图片上覆盖一张半透明的图片来保护版权或者增加品牌宣传。使用 Node.js 可以轻松地实现水印图片的添加。本篇文章将会介绍如何使用 JavaScript 和 Node.js 来给图片添加水印。

安装

首先，需要安装 jimp 库，它是一个轻量级的用于图像处理的库，可以用来生成缩略图，添加水印等。在终端中输入以下命令进行安装：

npm install jimp

添加水印图片

接下来看一个简单的例子，演示如何使用 Node.js 读取一张图片，并在图片上添加水印，最后保存修改后的图片。

const Jimp = require('jimp');

const imageFilePath = 'path/to/your/image.jpg'; // 图片路径

Jimp.read(imageFilePath)
  .then(image => {
    return Jimp.loadFont(Jimp.FONT_SANS_32_BLACK).then(font => {
      image.print(font, 10, 10, 'watermark'); // 添加水印
      return image;
    });
  })
  .then(image => image.write('output.jpg')) // 保存图片
  .catch(err => {
    console.error(err);
    process.exit(1);
  });

在上述代码中，我们首先使用 Jimp.read 函数读取图片，然后使用 Jimp.loadFont 函数将字体加载到内存中。然后调用 image.print 函数在图片上添加水印，最后使用 image.write 函数将修改后的图片保存。

添加水印图片 - 自定义样式

当然，我们可以自定义水印的字体、颜色、大小等属性。下面是一个自定义水印样式的例子：

const Jimp = require('jimp');

const imageFilePath = 'path/to/your/image.jpg'; // 图片路径

Jimp.read(imageFilePath)
  .then(image => {
    return Jimp.loadFont(Jimp.FONT_SANS_32_BLACK).then(font => {
      image.print(
        font,
        image.getWidth() / 2 - font.getAdvanceWidth('watermark') / 2,
        image.getHeight() / 2 - font.bitmap.height / 2,
        {
          text: 'watermark',
          alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
          alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
        },
        image.getWidth(),
        image.getHeight()
      ); // 添加水印
      return image;
    });
  })
  .then(image => image.write('output.jpg')) // 保存图片
  .catch(err => {
    console.error(err);
    process.exit(1);
  });

在上述代码中，我们使用了 image.getWidth 和 image.getHeight 函数获取图片的宽度和高度。然后使用 getAdvanceWidth 函数获取水印字体的宽度。

print 函数中的第一个参数是字体，第二、三个参数用来设置水印的位置。第四个参数是一个对象，用来设置字体的样式。最后两个参数是图片的宽度和高度。

结语

在这篇文章中，我们介绍了使用 JavaScript 和 Node.js 来给图片添加水印。相信使用了上述代码后，您可以轻松地为您的图片添加水印，保护您的版权或宣传您的品牌。