qrcode.js是最轻量无依赖的浏览器端二维码生成方案，体积约4KB，支持Canvas/SVG输出，但需DOM挂载、中文需设type:'byte'，纠错等级固定为M级。
qrcode.js 是最轻量、无依赖的生成方案
如果只需要在浏览器端快速生成静态二维码，qrcode.js（注意不是 qrcode-generator）是最直接的选择。它不依赖 DOM，纯 JS 实现，体积仅 ~4KB，支持 Canvas 和 SVG 输出。
- 调用
QRCode.toCanvas()或QRCode.toSVG()时，必须确保目标<canvas>或容器已挂载到 DOM，否则会报TypeError: Cannot read property 'getContext' of null - 中文内容需显式设置
type: 'byte'，否则默认utf8模式可能编码失败，生成乱码或空白图 - 不支持纠错等级动态调整（如 L/M/Q/H），默认为 M 级；若需更高容错，得换库
QRCode.toCanvas(canvasEl, 'https://example.com', {
errorCorrectionLevel: 'M',
type: 'byte',
width: 256
}, function (error) {
if (error) console.error(error);
});
qrcode-generator 支持精细控制纠错与版本
当需要指定 QR Code 版本（1–40）、严格控制纠错等级，或服务端 Node.js 环境生成 Base64 图片时，qrcode-generator 更合适。它不封装渲染逻辑，只负责生成数据矩阵，你得自己画 Canvas 或拼 SVG。
-
qrcode-generator的qrcode.generate()返回的是二维数组（如[[1,0,1],[0,1,0],...]），不是图片——别误以为能直接src="data:image..." - Node.js 中配合
canvas包使用时，注意canvas依赖系统 Cairo 库，在 Alpine Linux 容器里要额外装apk add cairo-dev - 版本号（
v参数）并非越大越好：v40 最多存 2953 字节，但尺寸大、扫描慢；一般 URL 推荐 v1–v10
const qrcode = require('qrcode-generator');
const qr = qrcode(0, 'M'); // v=0 自动选择最小版本，M 纠错
qr.addData('Hello 世界');
qr.make();
const data = qr.createDataURL(); // Node 下需搭配 canvas 才能生成 data URL
react-qr-code 在 React 项目中零配置可用
如果你用 React，且不想手动处理 ref、重绘或 SSR 兼容问题，react-qr-code 是目前最省心的组件封装。它基于 qrcode-generator，但屏蔽了底层细节。
- 不支持自定义模块颜色以外的样式（比如圆角模块、渐变填充），如需这类效果，得 fork 后改 SVG 渲染逻辑
- SSR 场景下，服务端渲染会出空 div，客户端 hydration 后才补上 SVG——若 SEO 要求二维码内容可见，得额外加
aria-label或隐藏文本 -
size属性单位是 px，不是 rem/em；设为200就是 200px 宽高，缩放靠 CSS transform 会影响扫码识别率
import QRCode from 'react-qr-code';
<QRCode
size={256}
style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
value='https://example.com'
viewBox='0 0 256 256'
/>
生成带 Logo 的二维码容易踩哪些坑
所有“中间加 logo”的需求，本质都是图像叠加，没有库原生支持——所谓“支持 logo”只是帮你裁剪中心区域留白，真正合成得自己动手。
立即学习“Java免费学习笔记（深入）”；
- Canvas 绘制 logo 前，必须先用
ctx.drawImage(qrCanvas, 0, 0)把二维码画进去，再画 logo；顺序反了 logo 会被盖住 - Logo 尺寸建议不超过二维码边长的 20%，否则破坏定位图案（三个角上的回字形），手机扫码失败率陡增
- 不要用
toDataURL('image/webp')导出——iOS Safari 不支持 WebP 的img标签加载，扫码工具也普遍不认；坚持用image/png
复杂点在于容错与视觉平衡：纠错等级设为 H 可容忍更大面积遮挡，但生成的码更密、更难扫；而把 logo 做成半透明或镂空，又可能干扰二值化识别。这些没法靠库自动解决，得实测不同机型和光照条件下的扫码成功率。
