浏览器端推荐qrcode.js（canvas/svg），node.js用qrcode库；qrcode-generator适合svg矢量需求；注意纠错等级与尺寸权衡，避免扫码失败。
直接用 qrcode.js 最省事，浏览器端生成不依赖后端，支持 Canvas 和 SVG 输出；Node.js 环境推荐 qrcode（同名但非同一作者），它更轻量、API 更一致。
浏览器里快速生成 Canvas 二维码
这是最常见需求：用户输入文本，页面立刻渲染出二维码图片。用 qrcode.js 只需几行：
- 引入方式：
<script src="https://cdn.jsdelivr.net/npm/qrcode.js@1.5.1/qrcode.min.js"></script> -
QRCode.toCanvas()直接画到<canvas></canvas>上，比先生成 base64 再设img.src更省内存 - 注意传参顺序：
toCanvas(canvasEl, 'https://example.com', { width: 200 })—— canvas 元素必须已挂载 DOM，否则报错Cannot read property 'getContext' of null - 不支持中文或特殊字符时，检查是否漏了
type: 'image/jpeg'或编码问题；默认 UTF-8，但某些旧版 Safari 对 emoji 渲染异常
const canvas = document.getElementById('qrcode-canvas');
QRCode.toCanvas(canvas, 'Hello 世界 ?', { width: 256 }, (error) => {
if (error) console.error('QR code generation failed:', error);
});
需要 SVG 输出？选 qrcode-generator
当你要响应式缩放、CSS 控制样式、或导出为矢量图用于印刷，qrcode-generator 是更稳妥的选择。它不依赖 DOM，纯 JS 实现，输出的是字符串格式的 SVG 标签。
- 它没有自动渲染逻辑，得手动插入：
document.getElementById('svg-container').innerHTML = svgString - 生成函数是
qrcode.generate('text', 'svg')，返回完整 SVG 字符串，含<svg></svg>根节点 - 不支持纠错等级微调（如 L/M/Q/H），默认用 M 级；若内容较长又想压缩尺寸，得换
qrcode库并显式传{ errorCorrectionLevel: 'H' } - IE11 兼容性好，但 SVG 中的
viewBox属性若被 CSS 重置宽高，可能拉伸变形
Node.js 后端生成 Base64 或文件
服务端场景下，qrcode（npm 包名，作者是 soldair）是事实标准。它能输出 buffer、stream、base64，也支持写入文件系统。
立即学习“Java免费学习笔记（深入）”；
- 安装：
npm install qrcode（别装错成qrcodejs或qrcode-generator） - 异步 API 是主流：
await QRCode.toDataURL('data:text/plain;base64,SGVsbG8gd29ybGQh')返回 base64 字符串，适合嵌入 HTML<img alt="javascript如何生成二维码_有哪些流行的库可以简化这个过程？" > - 同步方法
QRCode.toString()返回文本格式的 ASCII 二维码（仅调试用），不是图像 - 生成 PNG 文件时，注意
QRCode.toFile('./code.png', 'hi', { type: 'png', width: 300 })的type参数必须小写，填'PNG'会静默失败 - 大量并发生成时，避免用
toBuffer()+fs.writeFileSync，应改用toFileStream()流式写入，减少内存峰值
const QRCode = require('qrcode');
app.get('/qr/:text', async (req, res) => {
try {
const url = `https://example.com/${req.params.text}`;
const pngBuffer = await QRCode.toBuffer(url, { type: 'png', width: 200 });
res.set('Content-Type', 'image/png');
res.send(pngBuffer);
} catch (err) {
res.status(500).send('QR gen failed');
}
});
真正容易卡住的地方不是选库，而是纠错等级和尺寸的权衡：内容越长、纠错等级越高，生成的二维码模块数就越多，最小单元（pixel）尺寸稍一压低，手机扫码就会失败。实测中，width: 200 配合 errorCorrectionLevel: 'M' 覆盖 95% 场景；非要塞长 URL，优先缩短链接，而不是硬提纠错等级。
