基于Node.js实现一键生成个性化二维码

 更新时间:2024年03月05日 08:19:31   作者:JYeontu  
这篇文章主要为大家详细介绍了如何使用Node.js、Jimp和QRCode库,结合一个简单的脚本,通过命令行命令来快速给二维码加上指定的背景,打造更有个性化的二维码,感兴趣的可以了解下

在前面

二维码大家应该都用过了吧,常规的二维码都是千篇一律的黑白二维码,那么我们可不可以让二维码变得更有个性化一点呢?本文将向你展示如何使用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:

这是一个用于生成二维码的库。它支持多种输出格式,如 BufferCanvasPNGSVG 等。在这个脚本中,它被用来生成二维码的图像数据。

fs-extra:

fs-extra 是一个扩展了 Node.js 原生 fs 模块功能的库,提供了更多实用的文件系统操作方法,如 copymoveremove 等。在这个脚本中,它被用来写入生成的二维码图像到文件系统。

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 对象中解构出所需的值:qrCodeUrlqrCodeSizebackGroundImgoutputFolder 和 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二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Nodejs核心模块之net和http的使用详解

    Nodejs核心模块之net和http的使用详解

    net和http模块都是node核心模块之一,他们都可以搭建自己的服务端和客户端,以响应请求和发送请求。这篇文章主要介绍了Nodejs核心模块之net和http的使用详解,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • 教你用NodeJs构建属于自己的前端脚手工具

    教你用NodeJs构建属于自己的前端脚手工具

    对于脚手架我们可能天天都在接触,像npm包管理工具,vue-cli,webpack…,但是这些脚手架是怎么做出来的,我们自己能不能做一个出来玩玩,下面这篇文章主要给大家介绍了关于如何利用NodeJs构建属于自己的前端脚手工具的相关资料,需要的朋友可以参考下
    2022-05-05
  • node.js使用require()函数加载模块

    node.js使用require()函数加载模块

    本文通过几个具体实例来分析node.js中使用require()函数来加载模块的方法。非常的详尽,给需要的小伙伴们参考下吧
    2014-11-11
  • node.js操作mysql简单实例

    node.js操作mysql简单实例

    本文给大家介绍了nodejs 连接Mysql相关操作的示例代码,主要用到的是sql语句,都是比较基础的。
    2017-05-05
  • 最流行的Node.js精简型和全栈型开发框架介绍

    最流行的Node.js精简型和全栈型开发框架介绍

    这篇文章主要介绍了最流行的Node.js精简型和全栈型开发框架介绍,本文讲解了Express.js、KOA、Total.js、Sails.js、Meteor、Mean.IO等框架,需要的朋友可以参考下
    2015-02-02
  • node.js中express中间件body-parser的介绍与用法详解

    node.js中express中间件body-parser的介绍与用法详解

    这篇文章主要给大家介绍了关于node.js中express中间件body-parser的相关资料,文章通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • Nodejs实现短信验证码功能

    Nodejs实现短信验证码功能

    使用Nodejs的开发者愈来越多,基于Nodejs的后台开发也多了起来,像短信验证码、短信群发、国际短信这些需求,完全可以采用第三方接口来实现,云片就提供了这样的接口
    2017-02-02
  • 解决Mac下安装nmp的淘宝镜像失败问题

    解决Mac下安装nmp的淘宝镜像失败问题

    今天小编就为大家分享一篇解决Mac下安装nmp的淘宝镜像失败问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • PHP和NodeJs开发的应用如何共用Session

    PHP和NodeJs开发的应用如何共用Session

    这篇文章主要介绍了PHP和NodeJs开发的应用如何共用Session的相关资料及思路,需要的朋友可以参考下
    2015-04-04
  • VsCode与Node.js知识点详解

    VsCode与Node.js知识点详解

    在本篇文章中小编给大家分享了关于VsCode与Node.js的相关知识点以及安装等内容,需要的朋友们可以参考下。
    2019-09-09

最新评论