一键生成个性化二维码：打造你的专属数字名片

站长

2024年03月15日 13:15 · 阅读数 8

说在前面

🎈二维码大家应该都用过了吧，常规的二维码都是千篇一律的黑白二维码，那么我们可不可以让二维码变得更有个性化一点呢？本文将向你展示如何使用Node.js、Jimp和QRCode库，结合一个简单的脚本，通过命令行命令来快速给二维码加上指定的背景，打造更有个性化的二维码。

效果展示

一键生成个性化二维码：打造你的专属数字名片

功能实现

依赖引入

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 等。在这个脚本中，它被用来生成二维码的图像数据。
fs-extra:
- fs-extra 是一个扩展了 Node.js 原生 fs 模块功能的库，提供了更多实用的文件系统操作方法，如 copy、move、remove 等。在这个脚本中，它被用来写入生成的二维码图像到文件系统。
Jimp:
- Jimp 是一个图像处理库，它提供了读取、写入、创建、编辑图像的功能。在这个脚本中，它被用来处理背景图片和二维码图像的合成。
@jyeontu/j-inquirer:
- @jyeontu/j-inquirer 是一个基于 inquirer 的封装，它提供了一些额外的功能或改进。这个库通常用于简化命令行界面的创建过程，使得开发者可以更容易地构建交互式的命令行应用程序。
path:
- path 是 Node.js 的一个核心模块，用于处理文件路径。它提供了解析、连接、标准化路径等功能。在这个脚本中，它被用来构建文件路径，以便正确地保存生成的图像。

这些模块共同协作，使得脚本能够从用户那里获取必要的信息，生成二维码图像，处理背景图片，并最终将合成后的图像保存到指定的目录。

获取交互参数

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 "请输入一个有效的数字"; // 输入无效
      }
    },
  },
  {
    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 库创建的一个交互式命令行界面。它定义了一个包含五个输入提示的问题列表，用于收集用户生成二维码所需的信息。下面是每个提示的详细说明：

二维码链接输入：
- 类型：input
- 消息：请输入二维码链接
- 名称：qrCodeUrl
- 默认值：空字符串（""）
二维码尺寸输入：
- 类型：input
- 消息：请输入二维码尺寸
- 名称：qrCodeSize
- 默认值：256
- 验证：确保输入是一个有效的数字
背景图片选择：
- 类型：file
- 消息：请选择背景图片
- 名称：backGroundImg
- 默认值：空字符串（""）
- 目录：当前工作目录（baseDir）
保持背景图片比例：
- 类型：list
- 消息：是否保持背景图片比例
- 名称：keepRate
- 默认值：否
- 选项：["是", "否"]
图片存放目录选择：
- 类型：folder
- 消息：请选择图片存放目录
- 名称：outputFolder
- 默认值：空字符串（""）
- 目录：当前工作目录（baseDir）

ask 函数使用这个 options 数组来创建一个 inquirer 对话框，并通过 prompt 方法等待用户输入。一旦用户完成输入，answers 对象将包含所有用户的答案。

最后，代码从 answers 对象中解构出所需的值：qrCodeUrl、qrCodeSize、backGroundImg、outputFolder 和 keepRate。这些值将被用于后续的二维码生成和图片处理逻辑。

生成二维码图片

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 字符串转换为 Buffer
    const qrCodeBase64 = Buffer.from(qrCodeBuffer).toString("base64");

    // 保存二维码图片
    await fs.writeFile(`qrCode.png`, Buffer.from(qrCodeBuffer));
  } catch (error) {
    console.error("生成二维码时发生错误:", error);
  }
}

函数参数：
- data：要编码到二维码中的数据，通常是一个字符串，如网址或其他信息。
- size：二维码的尺寸，以像素为单位。这个值将用于设置二维码图像的宽度和高度。
设置二维码选项：
- 创建一个选项对象 options，其中包含二维码的宽度、高度和颜色设置。
- width 和 height 属性设置为传入的 size 参数值，确保二维码图像是正方形。
- color 对象定义了二维码的深色和浅色。在这里，深色部分（通常是二维码的条纹）设置为黑色（#000000），浅色部分（背景）设置为白色（#ffffff）。
生成二维码：
- 使用 QRCode.toBuffer 方法异步生成二维码图像。这个方法接受 data 和 options 作为参数，并返回一个包含二维码图像数据的 Buffer 对象。
- 将生成的 Buffer 对象保存到名为 qrCode.png 的文件中。这里使用了 fs.writeFile 方法，它是 fs-extra 库提供的一个异步文件写入方法。
错误处理：
- 如果在生成二维码的过程中发生错误，将捕获这个错误并打印到控制台。

这个函数可以被调用，传入需要编码的数据和期望的二维码尺寸，然后它会生成一个二维码图像并保存到当前工作目录。

添加背景图片

async function addBackground(backgroundUrl, size, outputFolder, keepRate) {
  try {
    // 加载背景图片并调整尺寸
    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); // 调整背景图片尺寸

    // 加载二维码图片
    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("添加背景时发生错误:", error);
  }
}

将生成的二维码图像添加到用户选择的背景图片上，并保存最终的合成图像。以下是该函数的详细解释：

函数参数：
- backgroundUrl：用户选择的背景图片的路径。
- size：二维码的尺寸，这个尺寸将用于调整背景图片的大小。
- outputFolder：用户指定的输出目录，用于保存最终的合成图片。
- keepRate：用户选择的是否保持背景图片比例的选项。
加载背景图片：
- 使用 Jimp.read 方法异步加载背景图片。
调整背景图片尺寸：
- 根据 keepRate 的值决定是否保持背景图片的原始比例。
- 如果 keepRate 是 "是"，则使用原始图片的宽度或高度（取较小的一个）作为调整后的尺寸。
- 如果 keepRate 是 "否"，则直接使用 size 参数作为调整后的尺寸。
- 计算调整后的尺寸与原始尺寸的比例，然后根据这个比例调整背景图片的尺寸。
加载二维码图片：
- 读取名为 "qrCode.png" 的二维码图片文件。
设置二维码透明度：
- 将二维码图片的透明度设置为 50%，以便在背景图片上可见。
合成图片：
- 计算二维码在背景图片上的位置，使其居中显示。
- 使用 composite 方法将二维码图片合成到背景图片上。
保存合成后的图片：
- 在用户指定的输出目录中保存合成后的图片，文件名为 "output.png"。
- 使用 fs.remove 方法删除临时生成的 "qrCode.png" 文件。
错误处理：
- 如果在处理图片的过程中发生错误，将捕获这个错误并打印到控制台。

这个函数是生成个性化二维码流程的关键部分，它允许用户将二维码与个性化的背景图片结合，创建一个独特的视觉作品。通过调整透明度和尺寸，用户可以在保持背景图片特征的同时，确保二维码的可读性。

插件使用

插件安装

直接通过npm进行全局安装。

npm i -g jyeontu

插件使用

安装完插件之后我们可以执行以下命名：

jyeontu img

一键生成个性化二维码：打造你的专属数字名片

选择自定义背景二维码生成，安装提示进行操作即可。

一键生成个性化二维码：打造你的专属数字名片

源码

插件库已开源到gitee，有兴趣的也可以到这里看看：gitee.com/zheng_yongt…

觉得有帮助的可以点个star~

有什么问题或错误可以指出，欢迎pr~

有什么想要实现的组件或想法可以联系我~

公众号

关注公众号『前端也能这么有趣』，获取更多有趣内容。

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。

转载自:https://juejin.cn/post/7341757372188704768