一键生成个性化二维码：打造你的专属数字名片
说在前面
🎈二维码大家应该都用过了吧，常规的二维码都是千篇一律的黑白二维码，那么我们可不可以让二维码变得更有个性化一点呢？本文将向你展示如何使用 Node.js、Jimp 和 QRCode 库，结合一个简单的脚本，通过命令行命令来快速给二维码加上指定的背景，打造更有个性化的二维码。
效果展示
功能实现
依赖引入
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 的一个核心模块，用于处理文件路径。它提供了解析、连接、标准化路径等功能。在这个脚本中，它被用来构建文件路径，以便正确地保存生成的图像。
这些模块共同协作，使得脚本能够从用户那里获取必要的信息，生成二维码图像，处理背景图片，并最终将合成后的图像保存到指定的目录。
获取交互参数
这段代码是使用 @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。这些值将被用于后续的二维码生成和图片处理逻辑。
生成二维码图片
函数参数：
data：要编码到二维码中的数据，通常是一个字符串，如网址或其他信息。size：二维码的尺寸，以像素为单位。这个值将用于设置二维码图像的宽度和高度。设置二维码选项：
创建一个选项对象
options，其中包含二维码的宽度、高度和颜色设置。width和height属性设置为传入的size参数值，确保二维码图像是正方形。color对象定义了二维码的深色和浅色。在这里，深色部分（通常是二维码的条纹）设置为黑色（#000000），浅色部分（背景）设置为白色（#ffffff）。生成二维码：
使用
QRCode.toBuffer方法异步生成二维码图像。这个方法接受data和options作为参数，并返回一个包含二维码图像数据的Buffer对象。将生成的
Buffer对象保存到名为qrCode.png的文件中。这里使用了fs.writeFile方法，它是fs-extra库提供的一个异步文件写入方法。错误处理：
如果在生成二维码的过程中发生错误，将捕获这个错误并打印到控制台。
这个函数可以被调用，传入需要编码的数据和期望的二维码尺寸，然后它会生成一个二维码图像并保存到当前工作目录。
添加背景图片
将生成的二维码图像添加到用户选择的背景图片上，并保存最终的合成图像。以下是该函数的详细解释：
函数参数：
backgroundUrl：用户选择的背景图片的路径。size：二维码的尺寸，这个尺寸将用于调整背景图片的大小。outputFolder：用户指定的输出目录，用于保存最终的合成图片。keepRate：用户选择的是否保持背景图片比例的选项。加载背景图片：
使用
Jimp.read方法异步加载背景图片。调整背景图片尺寸：
根据
keepRate的值决定是否保持背景图片的原始比例。如果
keepRate是 "是"，则使用原始图片的宽度或高度（取较小的一个）作为调整后的尺寸。如果
keepRate是 "否"，则直接使用size参数作为调整后的尺寸。计算调整后的尺寸与原始尺寸的比例，然后根据这个比例调整背景图片的尺寸。
加载二维码图片：
读取名为 "qrCode.png" 的二维码图片文件。
设置二维码透明度：
将二维码图片的透明度设置为 50%，以便在背景图片上可见。
合成图片：
计算二维码在背景图片上的位置，使其居中显示。
使用
composite方法将二维码图片合成到背景图片上。保存合成后的图片：
在用户指定的输出目录中保存合成后的图片，文件名为 "output.png"。
使用
fs.remove方法删除临时生成的 "qrCode.png" 文件。错误处理：
如果在处理图片的过程中发生错误，将捕获这个错误并打印到控制台。
这个函数是生成个性化二维码流程的关键部分，它允许用户将二维码与个性化的背景图片结合，创建一个独特的视觉作品。通过调整透明度和尺寸，用户可以在保持背景图片特征的同时，确保二维码的可读性。
插件使用
插件安装
直接通过 npm 进行全局安装。
插件使用
安装完插件之后我们可以执行以下命名：
选择自定义背景二维码生成，安装提示进行操作即可。
源码
插件库已开源到 gitee，有兴趣的也可以到这里看看：https://gitee.com/zheng_yongtao/node-scripting-tool/tree/master/src/jyeontu
觉得有帮助的可以点个 star~
有什么问题或错误可以指出，欢迎 pr~
有什么想要实现的组件或想法可以联系我~
公众号
关注公众号『前端也能这么有趣』，获取更多有趣内容。
说在后面
🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『
前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。
版权声明: 本文为 InfoQ 作者【JYeontu】的原创文章。
原文链接:【http://xie.infoq.cn/article/b23aa36b8a37e9d2c83269784】。文章转载请联系作者。
还未添加个人签名 2023-02-07 加入
还未添加个人简介
评论