Nodejs實(shí)現(xiàn)批量修改圖片尺寸工具

更新時(shí)間：2024年10月23日 11:24:02 作者：JYeontu

本文主要為大家介紹了一個(gè)Node.js工具,可以通過(guò)簡(jiǎn)單的命令行操作,允許用戶(hù)批量調(diào)整圖片尺寸,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

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

1.依賴(lài)引入

（1）@jyeontu/j-inquirer

@jyeontu/j-inquirer 是一個(gè) Node.js 的命令行交互模塊，它可以方便地創(chuàng)建一個(gè)交互式命令行界面，用于與用戶(hù)進(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-extra

擴(kuò)展了Node.js的fs模塊，它提供了多種操作文件和目錄的方法，如讀取文件、寫(xiě)入文件、創(chuàng)建目錄、刪除文件等等。在 Node.js 中，我們可以使用 fs-extra 模塊來(lái)讀取和處理本地的文件。

（4）jimp

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

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

（1）單張圖片或批量

詢(xún)問(wèn)用戶(hù)是要處理單個(gè)圖片還是一個(gè)圖片文件夾

async function askForSingleOrBatch() {
  const options = [
    {
      type: "list",
      message: "選擇文件夾還是單張圖片",
      name: "imgType",
      default: "單張圖片",
      choices: ["文件夾", "單張圖片"],
    },
  ];
  const answers = await new inquirer(options).prompt();
  const { imgType } = answers;
  return imgType;
}

（2）獲取圖片路徑

根據(jù)用戶(hù)選擇的類(lèi)型（單個(gè)圖片或文件夾），詢(xún)問(wèn)用戶(hù)選擇圖片或文件夾的路徑，并詢(xún)問(wèn)調(diào)整尺寸的方式。

async function askForParams(imgType) {
  const options = [];
  if (imgType === "文件夾") {
    options.push({
      type: "folder",
      message: "請(qǐng)選擇圖片目錄",
      name: "imgFolder",
      default: "",
      dirname: baseDir,
    });
  } else {
    options.push({
      type: "file",
      message: "請(qǐng)選擇圖片",
      name: "img",
      default: "",
      dirname: baseDir,
    });
  }
  options.push({
    type: "list",
    message: "調(diào)整類(lèi)型",
    name: "adjustType",
    default: "按比例",
    choices: ["按比例", "自定義寬高"],
  });
  const answers = await new inquirer(options).prompt();
  return answers;
}

（3）獲取具體調(diào)整參數(shù)

根據(jù)用戶(hù)選擇的調(diào)整方式，詢(xún)問(wèn)用戶(hù)具體的調(diào)整參數(shù)。

async function askForImgParams(adjustType) {
  const options = [];
  if (adjustType === "按比例") {
    options.push(
      {
        type: "list",
        message: "請(qǐng)選擇基準(zhǔn)邊",
        name: "referenceEdge",
        default: "寬",
        choices: ["寬", "高"],
      },
      {
        type: "input",
        message: "請(qǐng)輸入基準(zhǔn)邊長(zhǎng)度",
        name: "referenceEdgeLength",
        default: "800",
        validate: function (input) {
          const isNumber = !isNaN(input) && !isNaN(parseFloat(input));
          if (isNumber) {
            return true; // 輸入有效
          } else {
            return "請(qǐng)輸入一個(gè)有效的數(shù)字"; // 輸入無(wú)效
          }
        },
      }
    );
  } else {
    options.push(
      {
        type: "input",
        message: "請(qǐng)輸入寬度",
        name: "width",
        default: "1280",
        validate: function (input) {
          const isNumber = !isNaN(input) && !isNaN(parseFloat(input));
          if (isNumber) {
            return true; // 輸入有效
          } else {
            return "請(qǐng)輸入一個(gè)有效的數(shù)字"; // 輸入無(wú)效
          }
        },
      },
      {
        type: "input",
        message: "請(qǐng)輸入高度",
        name: "height",
        default: "720",
        validate: function (input) {
          const isNumber = !isNaN(input) && !isNaN(parseFloat(input));
          if (isNumber) {
            return true; // 輸入有效
          } else {
            return "請(qǐng)輸入一個(gè)有效的數(shù)字"; // 輸入無(wú)效
          }
        },
      }
    );
  }
  const answers = await new inquirer(options).prompt();
  return answers;
}

3.計(jì)算調(diào)整后圖片分辨率

根據(jù)用戶(hù)輸入的參數(shù)，計(jì)算出調(diào)整后的圖片寬度和高度。

function getWidthAndHeight(bitmap, params) {
  let { width, height } = bitmap;
  if (params.adjustType === "按比例") {
    if (params.referenceEdge === "寬") {
      const rate = params.referenceEdgeLength / width;
      width = params.referenceEdgeLength;
      height = height * rate;
    } else {
      const rate = params.referenceEdgeLength / height;
      height = params.referenceEdgeLength;
      width = width * rate;
    }
  } else {
    width = params.width;
    height = params.height;
  }
  width -= 0;
  height -= 0;
  return { width, height };
}

參數(shù)解釋：

bitmap：這是一個(gè)Jimp對(duì)象，代表了加載的圖片，包含了圖片的原始寬度和高度信息。
params：這是一個(gè)對(duì)象，包含了用戶(hù)通過(guò)命令行交互指定的調(diào)整參數(shù)，主要有：
- adjustType：用戶(hù)選擇的調(diào)整類(lèi)型，可以是"按比例"或"自定義寬高"。
- referenceEdge：如果用戶(hù)選擇按比例調(diào)整，這個(gè)屬性指定了參考邊是"寬"還是"高"。
- referenceEdgeLength：用戶(hù)輸入的基準(zhǔn)邊長(zhǎng)度。
- width和height：如果用戶(hù)選擇自定義寬高，這兩個(gè)屬性會(huì)包含用戶(hù)輸入的寬度和高度值。

函數(shù)邏輯：

函數(shù)首先從bitmap對(duì)象中解構(gòu)出原始的width（寬度）和height（高度）。
接下來(lái)，根據(jù)params.adjustType的值來(lái)判斷用戶(hù)選擇的調(diào)整類(lèi)型：
- 如果是"按比例"（"按比例"），則進(jìn)一步檢查params.referenceEdge的值：
  - 如果參考邊是"寬"（"寬"），則計(jì)算新的寬度為用戶(hù)指定的基準(zhǔn)邊長(zhǎng)度params.referenceEdgeLength，然后根據(jù)原始高度和新寬度的比例計(jì)算新的height。
  - 如果參考邊是"高"（"高"），則計(jì)算新的height為用戶(hù)指定的基準(zhǔn)邊長(zhǎng)度，然后計(jì)算新的width。
- 如果用戶(hù)選擇的是"自定義寬高"（非"按比例"），則直接將用戶(hù)指定的params.width和params.height作為新的寬度和高度。
在計(jì)算出新的寬度和高度后，函數(shù)通過(guò)width -= 0;和height -= 0;將數(shù)值轉(zhuǎn)換為數(shù)字類(lèi)型，以確保它們是數(shù)字而不是字符串。這是因?yàn)橛脩?hù)輸入可能會(huì)被當(dāng)作字符串處理，而在進(jìn)行數(shù)學(xué)計(jì)算時(shí)需要確保它們是數(shù)字類(lèi)型。
最后，函數(shù)返回一個(gè)包含新width和height的對(duì)象。

注意：

這個(gè)函數(shù)中的width -= 0;和height -= 0;是一種類(lèi)型轉(zhuǎn)換的技巧，它利用了JavaScript的類(lèi)型轉(zhuǎn)換規(guī)則，將變量轉(zhuǎn)換為數(shù)字類(lèi)型。這種轉(zhuǎn)換通常不是必須的，因?yàn)閺?code>bitmap對(duì)象中直接解構(gòu)出來(lái)的width和height應(yīng)該已經(jīng)是數(shù)字類(lèi)型了。如果params.width和params.height是從用戶(hù)輸入解析得到的，并且確定用戶(hù)輸入的是有效的數(shù)字，這兩個(gè)轉(zhuǎn)換語(yǔ)句可以省略。

4.獲取修改后圖片輸出路徑

根據(jù)用戶(hù)選擇的圖片或文件夾路徑，生成輸出目錄的路徑，如果路徑不存在則創(chuàng)建該目錄。

async function getOutPutDir(img) {
  const pathName = img.split("\\");
  const name = pathName.pop();
  pathName.push("resizeImgOutPut");
  const outputPath = pathName.join("\\");
  if (!fs.existsSync(outputPath)) {
    fs.mkdirSync(outputPath);
  }
  pathName.push(name);
  return pathName.join("\\");
}

5.定義圖片處理函數(shù)

（1）單張圖片

async function resizeImg(params) {
  const outputPath = await getOutPutDir(params.img);
  const image = await Jimp.read(params.img);
  const { width, height } = getWidthAndHeight(image.bitmap, params);
  const newSizeImage = image.resize(width, height);
  newSizeImage.write(outputPath);
}

（2）圖片目錄

async function resizeDir(params) {
  const imgList = fs.readdirSync(params.imgFolder);
  for (let i = 0; i < imgList.length; i++) {
    if (imgList[i].match(/\.(jpg|jpeg|png|bmp|tiff|gif)$/i)) {
      await resizeImg({
        ...params,
        img: params.imgFolder + "\\" + imgList[i],
      });
    }
  }
}