当前位置: 首页 > news >正文

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

在 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 项目中集成二维码生成功能,满足不同场景需求。

http://www.dtcms.com/a/366738.html

相关文章:

  • Windows+Docker一键部署CozeStudio私有化,保姆级
  • 【Docker】P1 前言:容器化技术发展之路
  • LangChain4J-(4)-多模态视觉理解
  • 少儿编程C++快速教程之——2. 字符串处理
  • SMARTGRAPHQA —— 基于多模态大模型的PDF 转 Markdown方法和基于大模型格式校正方法
  • Unity之安装教学
  • GcWord V8.2 新版本:TOA/TA字段增强、模板标签管理与PDF导出优化
  • 无需任何软件禁用 10 年 windows 更新
  • ArcGIS答疑-如何消除两张栅格图片中间的黑缝
  • 《D (R,O) Grasp:跨机械手灵巧抓取的机器人 - 物体交互统一表示》论文解读
  • 零售消费企业的数字化增长实践,2025新版下载
  • 三目摄像头 是一种配备三个独立摄像头模块的视觉系统
  • 苍穹外卖Day9 | 用户端、管理端接口功能开发、百度地图解析配送范围
  • 算法之二叉树
  • 不用服务器也能监控网络:MyIP+cpolar让中小企业告别昂贵方案
  • Wisdom SSH 是一款集成了强大 AI 助手功能的 SSH 工具,助你高效管理服务器。
  • 以OWTB为核心的三方仓运配一体化平台架构设计文档V0.1
  • 【软件测试】第1章 认识测试
  • Qt实现2048小游戏:看看AI如何评估棋盘策略实现“人机合一
  • OPENCV复习第二期
  • .NET GcPDF V8.2 新版本:人工智能 PDF 处理
  • Lucene 8.7.0 版本的索引文件格式
  • 学习资料1(粗略版)
  • android View详解—自定义ViewGroup,流式布局
  • Android 项目:画图白板APP开发(三)——笔锋(多 Path 叠加)
  • MySQL主从复制之进阶延时同步、GTID复制、半同步复制完整实验流程
  • Html重绘和重排
  • 25高教社杯数模国赛【C题国一学长思路+问题分析】
  • 观测云产品更新 | LLM 监测、查看器、事件中心、监控等
  • void*指针类型转换笔记