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

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.xdnf.cn/news/20014.html

相关文章:

  • C++对象模型的底层逻辑
  • 【数据分享】土地利用矢量shp数据分享-福建
  • 从关键词到语义理解:小陌引擎如何重构AI搜索优化逻辑?
  • Android 12 在 Rockchip 平台上的分区表parametet.txt 自动生成机制解析
  • 【单片机day03】
  • vue3存储/获取本地或会话存储,封装存储工具,结合pina使用存储
  • 电子病历空缺句的语言学特征描述与自动分类探析(以GPT-5为例)(下)
  • LLM重排器落地难题:如何破解速度与精度的工程困局?
  • Claude Code Router实现默认回复中文回复
  • 轻量级的磁盘碎片整理程序-开箱急用快速清理磁盘垃圾和碎片-供大家学习研究参考
  • Redis 客户端与服务器:银行的 “客户服务系统” 全流程
  • LeetCode 面试经典 150_矩阵_螺旋矩阵(35_54_C++_中等)(按层模拟)
  • K8S容器POD内存快照导出分析处理方案
  • Nano-Banana使用教程
  • websocket的key和accept分别是多少个字节
  • Widget 生命周期
  • 【Python基础】 13 Rust 与 Python 注释对比笔记
  • 零基础两个月通关2025下半年软考!保姆级冲刺规划(附每日学习表)
  • 随时学英语5 逛生活超市
  • 25高教社杯数模国赛【C题顶流思路+问题解析】第三弹
  • 处理PostgreSQL中的磁盘I/O瓶颈
  • 从BERT到T5:为什么说T5是NLP的“大一统者”?
  • 一键成文,标准随行——文思助手智能写作助力政务提效
  • 常见的相机模型针孔/鱼眼(Pinhole,Mei,K
  • 从零构建一款开源在线客服系统:我的Go语言实战之旅
  • 对话A5图王:20年互联网老兵,从Web1.0到Web3.0,牛友会里藏着最真的创业情
  • 后端Long类型数据传给前端造成精度丢失
  • ReAct模式解读
  • Linux 编译 Android 版 QGroundControl 软件并运行到手机上
  • 东土正创AI交通服务器再获北京市批量应用订单