Node.js轻松生成动态二维码

发布于:2025-09-05 ⋅ 阅读:(17) ⋅ 点赞:(0)

在 Node.js 环境中,qrcode 是一个功能强大且易于使用的库,专门用于生成二维码。它支持多种输出格式,包括终端显示、图片文件(PNG、SVG)以及数据 URL,适用于各种场景需求。

安装 qrcode 库

通过 npm 或 yarn 安装 qrcode

npm install qrcode
# 或
yarn add qrcode
生成终端显示的二维码

以下代码示例展示如何在终端输出二维码:

const QRCode = require('qrcode');

QRCode.toString('https://example.com', { type: 'terminal' }, function (err, url) {
  if (err) throw err;
  console.log(url);
});

运行后,终端会显示一个由字符构成的二维码图案,效果如下:

生成 PNG 图片文件

将二维码保存为 PNG 文件:

const QRCode = require('qrcode');

QRCode.toFile('output.png', 'https://example.com', {
  color: {
    dark: '#000000',  // 黑色方块
    light: '#ffffff'  // 白色背景
  }
}, (err) => {
  if (err) throw err;
  console.log('二维码已保存为 output.png');
});

通过 color 参数可自定义二维码颜色,效果如下:

生成 SVG 矢量图

若需矢量格式,可生成 SVG:

const QRCode = require('qrcode');

QRCode.toString('https://example.com', { type: 'svg' }, (err, svg) => {
  if (err) throw err;
  console.log(svg); // 输出 SVG 字符串,可保存为文件
});

运行效果如下:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" shape-rendering="crispEdges"><path fill="#ffffff" d="M0 0h33v33H0z"/><path stroke="#000000" d="M4 4.5h7m4 0h3m2 0h1m1 0h7M4 5.5h1m5 0h1m3 0h1m2 0h4m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m3 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m1 0h1m4 0h3m2 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h3m2 0h1m2 0h1m1 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h1m2 0h1m2 0h2m2 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M12 11.5h1m5 0h1m1 0h1M4 12.5h1m1 0h5m5 0h1m5 0h5M5 13.5h1m2 0h2m2 0h1m1 0h2m1 0h1m3 0h1m1 0h1m3 0h1M4 14.5h5m1 0h1m1 0h2m3 0h4m2 0h1m1 0h1m1 0h2M4 15.5h2m1 0h3m2 0h1m1 0h2m1 0h1m1 0h2m1 0h2m4 0h1M5 16.5h3m2 0h1m4 0h2m1 0h2m1 0h2m1 0h1m1 0h3M4 17.5h5m3 0h1m1 0h1m5 0h1m2 0h1m1 0h1m1 0h1M4 18.5h1m5 0h2m2 0h3m2 0h1m2 0h4m1 0h2M4 19.5h1m2 0h1m3 0h1m3 0h1m2 0h7m3 0h1M4 20.5h1m1 
0h1m2 0h2m1 0h4m4 0h5m1 0h1M12 21.5h2m2 0h5m3 0h2M4 22.5h7m6 0h2m1 0h1m1 0h1m1 0h1m1 0h3M4 23.5h1m5 0h1m1 0h2m2 0h2m2 0h1m3 0h2m1 0h1M4 24.5h1m1 0h3m1 0h1m1 0h3m1 0h1m1 0h7m1 0h1m1 0h1M4 25.5h1m1 0h3m1 0h1m1 0h1m6 0h1m1 0h2m1 0h5M4 26.5h1m1 0h3m1 0h1m1 0h5m2 0h1m5 0h2m1 0h1M4 27.5h1m5 0h1m4 0h1m2 0h1m1 0h2m1 0h3m2 0h1M4 28.5h7m1 0h2m1 0h1m5 0h8"/></svg>
生成数据 URL

将二维码转换为 Base64 数据 URL,便于网页直接嵌入:

const QRCode = require('qrcode');

QRCode.toDataURL('https://example.com', (err, url) => {
  if (err) throw err;
  console.log(url); // 输出如:data:image/png;base64,...
});

运行效果如下:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAAAklEQVR4AewaftIAAAORSURBVO3BQY4cSQIDQWeg/v9lXx32wFMAhcxuaASaxT+Y+b/DTDnMlMNMOcyUw0w5zJTDTDnMlMNMOcyUw0w5zJTDTDnMlMNM+fBQEn6TyhNJ+IbKTRKaSkvCb1J54jBTDjPlMFM+vEzlTUl4IglN5SYJLQlvUnlTEt50mCmHmXKYKR9+WBK+ofKNJNyotCQ0labSktBU3pSEb6j8pMNMOcyUw0z58I9RuVG5ScJNEprKv+QwUw4z5TBTPvxjknCj8g2VmyQ0lf+yw0w5zJTDTPnww1R+k8pNEppKU2lJuFF5QuVvcpgph5lymCkfXpaEv0kSmkpLQlO5UWlJaCo3SfibHWbKYaYcZsqHh1T+Zio3Kj9J5b/kMFMOM+UwU+IfPJCEptKS8CaVNyWhqbwpCW9S+UmHmXKYKYeZ8uEhlZaEpnKThBuVmyQ0lZaEG5WWhKbyjSQ0lZaEpvKNJDSVNx1mymGmHGbKh4eScJOEb6i0JDSVmyQ0lSeS8A2VJ5LQVG6S0FSeOMyUw0w5zJQPP0ylJeEmCU3lGyotCTcqNyotCd9IwjdUblRaEt50mCmHmXKYKfEPXpSEb6jcJKGpPJGEG5WWhBuVloQblZaEptKS8A2VJw4z5TBTDjMl/sEDSXiTyjeS0FRaEprKm5LQVG6S0FRaEppKS0JTedNhphxmymGmfHiZypuScKPyjSTcqNwkoancJOEmCU8koak8cZgph5lymCkfflkSmsqNSkvCN1RaEprKTRJukvAmlRuVloQ3HWbKYaYcZsqHH5aEpnKThBuVloSfpHKThJ+UhKbSVN50mCmHmXKYKfEP/sOScKNyk4Q3qXwjCTcqv+kwUw4z5TBTPjyUhN+k0lSeUGlJuFFpSbhJQlO5UWlJ+IbKE4eZcpgph5ny4WUqb0rCTRJuVG6ScKPyhMo3ktBUWhKaypsOM+UwUw4z5cMPS8I3VN6UhKZyo9KS8I0kPKHSktBUWhKayhOHmXKYKYeZ8uEfo/INlRuVloSm0pJwo9KS0JJwk4SfdJgph5lymCkf/jFJeELlCZVvqLQk3Ki0JLzpMFMOM+UwUz78MJWfpPKNJDSVmyQ0lZaEG5WWhG+o/KbDTDnMlMNM+fCyJPymJNyoPKFyo9KS0JLwRBJ+02GmHGbKYabEP5j5v8NMOcyUw0w5zJTDTDnMlMNMOcyUw0w5zJTDTDnMlMNMOcyUw0z5HyNBnAAsKI6EAAAAAElFTkSuQmCC
高级配置选项

qrcode 支持多种配置参数:

  • errorCorrectionLevel:纠错等级('L''M''Q''H'),默认为 'M'。即使符号脏了或损坏,纠错能力也可以成功扫描二维码
  • width:图像宽度(像素)。
  • margin:二维码边距(默认为 4)。
QRCode.toFile('custom.png', 'https://example.com', {
  errorCorrectionLevel: 'H',
  width: 300,
  margin: 2
}, (err) => { /* ... */ });
二维码版本
QRCode.toFile(
  "qrcode.png",
  "https://www.baidu.com",
  {
    width: 500, // 宽度(像素)
    margin: 2, // 边距
    color: {
      dark: "#000000", // 前景色(黑色)
      light: "#FFFFFF", // 背景色(白色)
    },
    //QR 码版本范围从版本 1 到版本 40,默认为1
    // 每个版本都有不同数量的模块(黑点和白点),它们定义符号的大小。对于版本 1,它们是 21x21,对于版本 2,它们是 25x25 等等。版本越高,可存储的数据越多,当然二维码符号也会越大。
    version: 10,
  },
  (err) => {
    if (err) throw err;
    console.log("自定义二维码已生成");
  }
);

参数说明

  • "qrcode.png":生成的二维码图片文件名。
  • "https://www.baidu.com":需要编码的URL或文本内容。
  • width: 500:设置二维码的宽度为500像素。
  • margin: 2:二维码周围留白的边距为2个单位。
  • color:自定义颜色配置,dark为二维码前景色(黑色),light为背景色(白色)。
  • version: 10:指定二维码的版本为10(版本范围1-40)。版本越高,存储的数据越多,二维码尺寸也会更大。

下面是版本为1的二维码和版本为10的二维码:

动态内容生成

结合动态数据生成二维码,例如用户 ID 或会话信息:

const userId = 'user123';
QRCode.toFile(`user_${userId}.png`, `https://example.com/user/${userId}`, (err) => { /* ... */ });
编码模式
var QRCode = require("qrcode");
var toSJIS = require("qrcode/helper/to-sjis");

// 手动指定编码模式
let segs = [
  { data: "ABCDEFG", mode: "alphanumeric" },
  { data: "0123456", mode: "numeric" },
];

QRCode.toDataURL(segs, function (err, url) {
  console.log(url);
});

// 汉字模式
QRCode.toDataURL(kanjiString, { toSJISFunc: toSJIS }, function (err, url) {
  console.log(url);
});

二维码编码模式详解:

alphanumeric 模式

  • 支持字符:大写字母(A-Z)、数字(0-9)及9个特殊字符(空格$%*+-./:)
  • 编码效率:每字符占用6比特,适合包含字母和数字的混合内容
  • 典型应用场景:网址、产品序列号等

numeric 模式

  • 支持字符:仅数字(0-9)
  • 编码效率:每3个数字占用10比特,纯数字内容时效率最高
  • 典型应用场景:电话号码、身份证号等数字序列

kanji 模式

  • 支持字符:汉字
  • 编码效率:每个汉字占用13比特
  • 典型应用场景:包含汉字的文本内容

自动模式选择 当不显式指定mode参数时,库会根据输入内容自动选择最优编码模式。优先顺序为:numeric > alphanumeric > byte > kanji(需配置转换函数)。

注意事项
  • 避免生成过大的二维码,可能导致扫描失败。
  • 纠错等级越高,二维码复杂度越高,但容错能力更强。
  • 在浏览器端使用时,可通过 CDN 引入 qrcode 的浏览器版本。

通过以上方法,可以灵活地在 Node.js 项目中集成二维码生成功能,满足不同场景需求。


网站公告

今日签到

点亮在社区的每一天
去签到