使用Node.js插件给指定目录下的所有图片添加上文字水印_Node.js

说在前面

加水印是为了保护图片的版权和安全。在互联网上，很容易将图片下载或者截屏保存下来，然后进行二次使用，这就侵犯了原作者的版权。而加上水印可以使得图片更难被盗用，因为盗用者需要花费时间和精力去处理水印，而这个过程可能会破坏原始图片的质量。

此外，水印也可以帮助识别图片的来源和所有者。如果一张图片被恶意使用或者未经授权的使用，通过水印可以追踪到图片的来源和版权所有人，从而维护原作者的权益。

因此，加水印对于保护图片的版权和安全具有重要意义。

代码实现

1、依赖引入

（1）@jyeontu/j-inquirer

@jyeontu/j-inquirer 是一个 node.js 的命令行交互模块，它可以方便地创建一个交互式命令行界面，用于与用户进行交互。它提供了多种常见的输入方式，如单选、多选、输入框、文件选择、目录选择等等，并且可以自定义提示信息、选项等。

（2）@jyeontu/progress-bar

@jyeontu/progress-bar 是一个 node.js 的进度条模块，它可以在命令行中展示一个进度条，用于显示正在进行的操作的进度。它支持多种样式和配置选项，可以根据需要调整进度条的样式、长度、颜色等等。

（3）fs

fs 是 node.js 内置的文件系统模块，它提供了多种操作文件和目录的方法，如读取文件、写入文件、创建目录、删除文件等等。在 node.js 中，我们可以使用 fs 模块来读取和处理本地的文件。

（4）jimp

jimp 是一个纯 javascript 的图像处理库，它可以用于处理各种类型的图片，如 png、jpeg、bmp 等等。它提供了多种图像处理方法，如调整大小、裁剪、旋转、添加水印等等，可以轻松地实现各种图像处理需求。在 node.js 中，我们可以使用 jimp 来读取和处理本地的图片文件。

2、命令行交互获取处理参数

const textwatermarkoptions = [
  {
    type: "folder",
    message: "请选择需要添加水印的图片目录",
    name: "inputfolder",
    default: "",
    dirname: basedir,
  },
  {
    type: "input",
    message: "请输入水印文字",
    name: "watermarktext",
    default: "",
  },
  {
    type: "list",
    message: "请选择水印位置",
    name: "watermarkpos",
    default: "center",
    choices: [
      "上左",
      "上中",
      "上右",
      "中左",
      "正中",
      "中右",
      "下左",
      "下中",
      "下右",
    ],
  },
];
async function ask(options) {
  const answers = await new inquirer(options).prompt();
  return answers;
}
async function textwatermark(inputfolder, outputfolder) {
  const { watermarktext, watermarkpos } = await ask(textwatermarkoptions);
  …………
}

获取用户需要添加水印的目录、水印文字内容及水印添加位置。

3、图片添加水印

（1）获取目录下的所有图片

const img_type = ["jpg", "png", "jpeg"];
function checkimgtype(file) {
  const tmp = file.split(".");
  return img_type.includes(tmp[tmp.length - 1].tolocalelowercase());
}

const imagefiles = fs
.readdirsync(inputfolder)
.filter((file) => checkimgtype(file));

目前支持处理"jpg", "png", "jpeg"类型的图片文件，获取指定目录下的符合类型的所有图片文件。

（2）水印位置计算

function getposition(img, watermark, pos) {
  const imagewidth = img.width;
  const imageheight = img.height;
  const watermarkwidth = watermark.width;
  const watermarkheight = watermark.height;
  let x = (imagewidth - watermarkwidth) / 2; // 水印横坐标
  let y = (imageheight - watermarkheight) / 2; // 水印纵坐标

  switch (pos) {
    case "上左":
      x = 10; // 水印横坐标
      y = 10; // 水印纵坐标
      break;
    case "上中":
      x = (imagewidth - watermarkwidth) / 2; // 水印横坐标
      y = 10; // 水印纵坐标
      break;
    case "上右":
      x = imagewidth - watermarkwidth - 20; // 水印横坐标
      y = 10; // 水印纵坐标
      break;
    case "中左":
      x = 10; // 水印横坐标
      y = (imageheight - watermarkheight) / 2; // 水印纵坐标
      break;
    case "正中":
      x = (imagewidth - watermarkwidth) / 2; // 水印横坐标
      y = (imageheight - watermarkheight) / 2; // 水印纵坐标
      break;
    case "中右":
      x = imagewidth - watermarkwidth - 20; // 水印横坐标
      y = (imageheight - watermarkheight) / 2; // 水印纵坐标
      break;
    case "下左":
      x = 10; // 水印横坐标
      y = imageheight - watermarkheight - 20; // 水印纵坐标
      break;
    case "下中":
      x = (imagewidth - watermarkwidth) / 2; // 水印横坐标
      y = imageheight - watermarkheight - 20; // 水印纵坐标
      break;
    case "下右":
      x = imagewidth - watermarkwidth - 20; // 水印横坐标
      y = imageheight - watermarkheight - 20; // 水印纵坐标
      break;
  }
  return {
    x,
    y,
  };
}

（3）添加文字水印

使用 jimp 模块读取输入图片，根据水印文字和位置参数创建水印图层，并与原始图片进行合成，最后保存处理后的图片到输出路径。具体说明已在下面代码中注释。

async function addwatermark(
  inputfilepath,
  outputfilepath,
  watermarktext,
  watermarkpos,
  textconfig = {}
) {
//接收五个参数：`inputfilepath`（输入图片文件路径）、`outputfilepath`（输出图片文件路径）、`watermarktext`（水印文字内容）、`watermarkpos`（水印位置）、`textconfig`（文本配置，可选）。
  textoptions.text = watermarktext;
  for (const k in textconfig) {
    textoptions[k] = textconfig[k];
  }
  // 使用 `jimp.read` 方法读取输入图片文件，并使用 `jimp.loadfont` 方法加载字体文件
  const image = await jimp.read(inputfilepath);
  const font = await jimp.loadfont(jimp.font_sans_16_white);

  // 获取输入图片和水印的宽度和高度，使用 `jimp.measuretext` 方法测量水印文字的宽度，使用 `jimp.measuretextheight` 方法测量水印文字的高度。
  const imagewidth = image.getwidth();
  const imageheight = image.getheight();
  const watermarkwidth = jimp.measuretext(font, watermarktext);
  const watermarkheight = jimp.measuretextheight(
    font,
    watermarktext,
    watermarkwidth
  );

  // 调用 `getposition` 函数计算水印放置的位置，根据输入图片和水印的尺寸以及水印位置参数 `watermarkpos`。
  const { x, y } = getposition(
    {
      height: imageheight,
      width: imagewidth,
    },
    { height: watermarkheight, width: watermarkwidth },
    watermarkpos
  );

  // 创建一个新的 `jimp` 对象作为背景图层，宽度为水印宽度加上 20 像素，高度为水印高度加上 20 像素，并设置背景颜色为半透明黑色（0x00000030）
  const background = new jimp(
    watermarkwidth + 20,
    watermarkheight + 20,
    0x00000030
  ); // 0x00000080 表示半透明黑色背景

  // 将水印文字打印到背景图层上，使用指定的字体、起始坐标（10, 10）、文本配置 `textoptions`，并指定水印文字的宽度和高度。
  background.print(font, 10, 10, textoptions, watermarkwidth, watermarkheight);

  // 将背景图层与原始图片进行合成，使用指定的合成模式 `jimp.blend_source_over`。
  image.composite(background, x, y, { mode: jimp.blend_source_over });

  // 将处理后的图片保存到输出图片文件路径 `outputfilepath`。
  await image.writeasync(outputfilepath);
}