快捷導(dǎo)航

使用Node.js插件給指定目錄下的所有圖片添加上文字水印

更新時(shí)間：2023年12月22日 08:42:23 作者：JYeontu

加水印是為了保護(hù)圖片的版權(quán)和安全,在互聯(lián)網(wǎng)上,很容易將圖片下載或者截屏保存下來(lái),然后進(jìn)行二次使用,這就侵犯了原作者的版權(quán),此外,水印也可以幫助識(shí)別圖片的來(lái)源和所有者,因此本文給大家介紹了如何使用Node.js插件給指定目錄下的所有圖片添加上文字水印

說(shuō)在前面

加水印是為了保護(hù)圖片的版權(quán)和安全。在互聯(lián)網(wǎng)上，很容易將圖片下載或者截屏保存下來(lái)，然后進(jìn)行二次使用，這就侵犯了原作者的版權(quán)。而加上水印可以使得圖片更難被盜用，因?yàn)楸I用者需要花費(fèi)時(shí)間和精力去處理水印，而這個(gè)過(guò)程可能會(huì)破壞原始圖片的質(zhì)量。

此外，水印也可以幫助識(shí)別圖片的來(lái)源和所有者。如果一張圖片被惡意使用或者未經(jīng)授權(quán)的使用，通過(guò)水印可以追蹤到圖片的來(lái)源和版權(quán)所有人，從而維護(hù)原作者的權(quán)益。

因此，加水印對(duì)于保護(hù)圖片的版權(quán)和安全具有重要意義。

代碼實(shí)現(xiàn)

1、依賴引入

（1）@jyeontu/j-inquirer

@jyeontu/j-inquirer 是一個(gè) Node.js 的命令行交互模塊，它可以方便地創(chuàng)建一個(gè)交互式命令行界面，用于與用戶進(jìn)行交互。它提供了多種常見(jiàn)的輸入方式，如單選、多選、輸入框、文件選擇、目錄選擇等等，并且可以自定義提示信息、選項(xiàng)等。

（2）@jyeontu/progress-bar

@jyeontu/progress-bar 是一個(gè) Node.js 的進(jìn)度條模塊，它可以在命令行中展示一個(gè)進(jìn)度條，用于顯示正在進(jìn)行的操作的進(jìn)度。它支持多種樣式和配置選項(xiàng)，可以根據(jù)需要調(diào)整進(jìn)度條的樣式、長(zhǎng)度、顏色等等。

（3）fs

fs 是 Node.js 內(nèi)置的文件系統(tǒng)模塊，它提供了多種操作文件和目錄的方法，如讀取文件、寫(xiě)入文件、創(chuàng)建目錄、刪除文件等等。在 Node.js 中，我們可以使用 fs 模塊來(lái)讀取和處理本地的文件。

（4）jimp

jimp 是一個(gè)純 JavaScript 的圖像處理庫(kù)，它可以用于處理各種類型的圖片，如 PNG、JPEG、BMP 等等。它提供了多種圖像處理方法，如調(diào)整大小、裁剪、旋轉(zhuǎn)、添加水印等等，可以輕松地實(shí)現(xiàn)各種圖像處理需求。在 Node.js 中，我們可以使用 jimp 來(lái)讀取和處理本地的圖片文件。

2、命令行交互獲取處理參數(shù)

const textWaterMarkOptions = [
  {
    type: "folder",
    message: "請(qǐng)選擇需要添加水印的圖片目錄",
    name: "inputFolder",
    default: "",
    dirname: baseDir,
  },
  {
    type: "input",
    message: "請(qǐng)輸入水印文字",
    name: "watermarkText",
    default: "",
  },
  {
    type: "list",
    message: "請(qǐng)選擇水印位置",
    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);
  …………
}

獲取用戶需要添加水印的目錄、水印文字內(nèi)容及水印添加位置。

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）水印位置計(jì)算

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; // 水印橫坐標(biāo)
  let y = (imageHeight - watermarkHeight) / 2; // 水印縱坐標(biāo)

  switch (pos) {
    case "上左":
      x = 10; // 水印橫坐標(biāo)
      y = 10; // 水印縱坐標(biāo)
      break;
    case "上中":
      x = (imageWidth - watermarkWidth) / 2; // 水印橫坐標(biāo)
      y = 10; // 水印縱坐標(biāo)
      break;
    case "上右":
      x = imageWidth - watermarkWidth - 20; // 水印橫坐標(biāo)
      y = 10; // 水印縱坐標(biāo)
      break;
    case "中左":
      x = 10; // 水印橫坐標(biāo)
      y = (imageHeight - watermarkHeight) / 2; // 水印縱坐標(biāo)
      break;
    case "正中":
      x = (imageWidth - watermarkWidth) / 2; // 水印橫坐標(biāo)
      y = (imageHeight - watermarkHeight) / 2; // 水印縱坐標(biāo)
      break;
    case "中右":
      x = imageWidth - watermarkWidth - 20; // 水印橫坐標(biāo)
      y = (imageHeight - watermarkHeight) / 2; // 水印縱坐標(biāo)
      break;
    case "下左":
      x = 10; // 水印橫坐標(biāo)
      y = imageHeight - watermarkHeight - 20; // 水印縱坐標(biāo)
      break;
    case "下中":
      x = (imageWidth - watermarkWidth) / 2; // 水印橫坐標(biāo)
      y = imageHeight - watermarkHeight - 20; // 水印縱坐標(biāo)
      break;
    case "下右":
      x = imageWidth - watermarkWidth - 20; // 水印橫坐標(biāo)
      y = imageHeight - watermarkHeight - 20; // 水印縱坐標(biāo)
      break;
  }
  return {
    x,
    y,
  };
}

（3）添加文字水印

使用 jimp 模塊讀取輸入圖片，根據(jù)水印文字和位置參數(shù)創(chuàng)建水印圖層，并與原始圖片進(jìn)行合成，最后保存處理后的圖片到輸出路徑。具體說(shuō)明已在下面代碼中注釋。

async function addWaterMark(
  inputFilePath,
  outputFilePath,
  watermarkText,
  watermarkPos,
  textconfig = {}
) {
//接收五個(gè)參數(shù)：`inputFilePath`（輸入圖片文件路徑）、`outputFilePath`（輸出圖片文件路徑）、`watermarkText`（水印文字內(nèi)容）、`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` 方法測(cè)量水印文字的寬度，使用 `Jimp.measureTextHeight` 方法測(cè)量水印文字的高度。
  const imageWidth = image.getWidth();
  const imageHeight = image.getHeight();
  const watermarkWidth = Jimp.measureText(font, watermarkText);
  const watermarkHeight = Jimp.measureTextHeight(
    font,
    watermarkText,
    watermarkWidth
  );

  // 調(diào)用 `getPosition` 函數(shù)計(jì)算水印放置的位置，根據(jù)輸入圖片和水印的尺寸以及水印位置參數(shù) `watermarkPos`。
  const { x, y } = getPosition(
    {
      height: imageHeight,
      width: imageWidth,
    },
    { height: watermarkHeight, width: watermarkWidth },
    watermarkPos
  );

  // 創(chuàng)建一個(gè)新的 `Jimp` 對(duì)象作為背景圖層，寬度為水印寬度加上 20 像素，高度為水印高度加上 20 像素，并設(shè)置背景顏色為半透明黑色（0x00000030）
  const background = new Jimp(
    watermarkWidth + 20,
    watermarkHeight + 20,
    0x00000030
  ); // 0x00000080 表示半透明黑色背景

  // 將水印文字打印到背景圖層上，使用指定的字體、起始坐標(biāo)（10, 10）、文本配置 `textOptions`，并指定水印文字的寬度和高度。
  background.print(font, 10, 10, textOptions, watermarkWidth, watermarkHeight);

  // 將背景圖層與原始圖片進(jìn)行合成，使用指定的合成模式 `Jimp.BLEND_SOURCE_OVER`。
  image.composite(background, x, y, { mode: Jimp.BLEND_SOURCE_OVER });

  // 將處理后的圖片保存到輸出圖片文件路徑 `outputFilePath`。
  await image.writeAsync(outputFilePath);
}