基于Node.js实现一键生成个性化二维码
作者：JYeontu
在前面
二维码大家应该都用过了吧，常规的二维码都是千篇一律的黑白二维码，那么我们可不可以让二维码变得更有个性化一点呢？本文将向你展示如何使用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
选择自定义背景二维码生成，安装提示进行操作即可。
到此这篇关于基于Node.js实现一键生成个性化二维码的文章就介绍到这了,更多相关Node.js二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！