基于Node.js實現(xiàn)一鍵生成個性化二維碼

更新時間：2024年03月05日 08:19:31 作者：JYeontu

這篇文章主要為大家詳細介紹了如何使用Node.js、Jimp和QRCode庫,結(jié)合一個簡單的腳本,通過命令行命令來快速給二維碼加上指定的背景,打造更有個性化的二維碼,感興趣的可以了解下

在前面

二維碼大家應該都用過了吧，常規(guī)的二維碼都是千篇一律的黑白二維碼，那么我們可不可以讓二維碼變得更有個性化一點呢？本文將向你展示如何使用Node.js、Jimp和QRCode庫，結(jié)合一個簡單的腳本，通過命令行命令來快速給二維碼加上指定的背景，打造更有個性化的二維碼。

效果展示

功能實現(xiàn)

依賴引入

const QRCode = require("qrcode");
const fs = require("fs-extra");
const Jimp = require("jimp");
const inquirer = require("@jyeontu/j-inquirer");
const path = require("path");

qrcode:

這是一個用于生成二維碼的庫。它支持多種輸出格式，如 Buffer、Canvas、PNG、SVG 等。在這個腳本中，它被用來生成二維碼的圖像數(shù)據(jù)。

fs-extra:

fs-extra 是一個擴展了 Node.js 原生 fs 模塊功能的庫，提供了更多實用的文件系統(tǒng)操作方法，如 copy、move、remove 等。在這個腳本中，它被用來寫入生成的二維碼圖像到文件系統(tǒng)。

Jimp:

Jimp 是一個圖像處理庫，它提供了讀取、寫入、創(chuàng)建、編輯圖像的功能。在這個腳本中，它被用來處理背景圖片和二維碼圖像的合成。

@jyeontu/j-inquirer:

@jyeontu/j-inquirer 是一個基于 inquirer 的封裝，它提供了一些額外的功能或改進。這個庫通常用于簡化命令行界面的創(chuàng)建過程，使得開發(fā)者可以更容易地構(gòu)建交互式的命令行應用程序。

path:

path 是 Node.js 的一個核心模塊，用于處理文件路徑。它提供了解析、連接、標準化路徑等功能。在這個腳本中，它被用來構(gòu)建文件路徑，以便正確地保存生成的圖像。

這些模塊共同協(xié)作，使得腳本能夠從用戶那里獲取必要的信息，生成二維碼圖像，處理背景圖片，并最終將合成后的圖像保存到指定的目錄。

獲取交互參數(shù)

const options = [
  {
    type: "input",
    message: "請輸入二維碼鏈接",
    name: "qrCodeUrl",
    default: "",
  },
  {
    type: "input",
    message: "請輸入二維碼尺寸",
    name: "qrCodeSize",
    default: "256",
    validate: function (input) {
      const isNumber = !isNaN(input) && !isNaN(parseFloat(input));
      if (isNumber) {
        return true; // 輸入有效
      } else {
        return "請輸入一個有效的數(shù)字"; // 輸入無效
      }
    },
  },
  {
    type: "file",
    message: "請選擇背景圖片",
    name: "backGroundImg",
    default: "",
    dirname: baseDir,
  },
  {
    type: "list",
    message: "是否保持背景圖片比例",
    name: "keepRate",
    default: "否",
    choices: ["是", "否"],
  },
  {
    type: "folder",
    message: "請選擇圖片存放目錄",
    name: "outputFolder",
    default: "",
    dirname: baseDir,
  },
];
async function ask(options) {
  const answers = await new inquirer(options).prompt();
  return answers;
}

const answers = await ask(options);
const { qrCodeUrl, qrCodeSize, backGroundImg, outputFolder, keepRate } = answers;

這段代碼是使用 @jyeontu/j-inquirer 庫創(chuàng)建的一個交互式命令行界面。它定義了一個包含五個輸入提示的問題列表，用于收集用戶生成二維碼所需的信息。下面是每個提示的詳細說明：

二維碼鏈接輸入：

類型：input
消息：請輸入二維碼鏈接
名稱：qrCodeUrl
默認值：空字符串（""）

二維碼尺寸輸入：

類型：input
消息：請輸入二維碼尺寸
名稱：qrCodeSize
默認值：256
驗證：確保輸入是一個有效的數(shù)字

背景圖片選擇：

類型：file
消息：請選擇背景圖片
名稱：backGroundImg
默認值：空字符串（""）
目錄：當前工作目錄（baseDir）

保持背景圖片比例：

類型：list
消息：是否保持背景圖片比例
名稱：keepRate
默認值：否
選項：["是", "否"]

圖片存放目錄選擇：

類型：folder
消息：請選擇圖片存放目錄
名稱：outputFolder
默認值：空字符串（""）
目錄：當前工作目錄（baseDir）

ask 函數(shù)使用這個 options 數(shù)組來創(chuàng)建一個 inquirer 對話框，并通過 prompt 方法等待用戶輸入。一旦用戶完成輸入，answers 對象將包含所有用戶的答案。

最后，代碼從 answers 對象中解構(gòu)出所需的值：qrCodeUrl、qrCodeSize、backGroundImg、outputFolder 和 keepRate。這些值將被用于后續(xù)的二維碼生成和圖片處理邏輯。

生成二維碼圖片

async function generateQRCode(data, size) {
  try {
    // 設置二維碼的選項
    const options = {
      width: size,
      height: size,
      color: {
        dark: "#000000", // 二維碼的深色部分
        light: "#ffffff", // 二維碼的淺色部分（透明）
      },
    };
    // 使用 await 等待二維碼生成
    const qrCodeBuffer = await QRCode.toBuffer(data, options);
    // 將 Base64 字符串轉(zhuǎn)換為 Buffer
    const qrCodeBase64 = Buffer.from(qrCodeBuffer).toString("base64");
    // 保存二維碼圖片
    await fs.writeFile(`qrCode.png`, Buffer.from(qrCodeBuffer));
  } catch (error) {
    console.error("生成二維碼時發(fā)生錯誤:", error);
  }
}

函數(shù)參數(shù)：

data：要編碼到二維碼中的數(shù)據(jù)，通常是一個字符串，如網(wǎng)址或其他信息。
size：二維碼的尺寸，以像素為單位。這個值將用于設置二維碼圖像的寬度和高度。

設置二維碼選項：

創(chuàng)建一個選項對象 options，其中包含二維碼的寬度、高度和顏色設置。
width 和 height 屬性設置為傳入的 size 參數(shù)值，確保二維碼圖像是正方形。
color 對象定義了二維碼的深色和淺色。在這里，深色部分（通常是二維碼的條紋）設置為黑色（#000000），淺色部分（背景）設置為白色（#ffffff）。

生成二維碼：

使用 QRCode.toBuffer 方法異步生成二維碼圖像。這個方法接受 data 和 options 作為參數(shù)，并返回一個包含二維碼圖像數(shù)據(jù)的 Buffer 對象。
將生成的 Buffer 對象保存到名為 qrCode.png 的文件中。這里使用了 fs.writeFile 方法，它是 fs-extra 庫提供的一個異步文件寫入方法。

錯誤處理：

如果在生成二維碼的過程中發(fā)生錯誤，將捕獲這個錯誤并打印到控制臺。

這個函數(shù)可以被調(diào)用，傳入需要編碼的數(shù)據(jù)和期望的二維碼尺寸，然后它會生成一個二維碼圖像并保存到當前工作目錄。

添加背景圖片

async function addBackground(backgroundUrl, size, outputFolder, keepRate) {
  try {
    // 加載背景圖片并調(diào)整尺寸
    const background = await Jimp.read(backgroundUrl);

    const width = keepRate === "是" ? background.bitmap.width : size;
    const height = keepRate === "是" ? background.bitmap.height : size;
    const minLen = Math.min(width, height);
    const rate = size / minLen;
    await background.resize(width * rate, height * rate); // 調(diào)整背景圖片尺寸

    // 加載二維碼圖片
    const qrCode = await Jimp.read("qrCode.png");
    // 設置二維碼的透明度，以便可以看到背景圖片
    qrCode.opacity(0.5); // 0.5 表示 50% 的透明度
    const x = (width * rate - size) / 2,
      y = (height * rate - size) / 2;
    // 將二維碼放置在背景圖片上
    background.composite(qrCode, x, y, {
      mode: Jimp.BLEND_SOURCE_OVER,
    });
    const outPath = path.join(outputFolder, "output.png");
    // 保存合成后的圖片
    await background.write(outPath);
    console.log(`合成后的圖片已保存為 ${outPath}`);
    fs.remove("qrCode.png");
  } catch (error) {
    console.error("添加背景時發(fā)生錯誤:", error);
  }
}

將生成的二維碼圖像添加到用戶選擇的背景圖片上，并保存最終的合成圖像。以下是該函數(shù)的詳細解釋：

函數(shù)參數(shù)：