生成二维码的JavaScript方法及库推荐

本文系统介绍了在浏览器端和Node.js环境中生成二维码的实用方案，重点推荐了qrcode.js（前端Canvas/SVG渲染）、qrcode-generator（纯JS矢量SVG输出）和qrcode（Node.js服务端主流库）三大工具，并深入剖析了它们的适用场景、关键API用法、常见坑点（如DOM挂载时机、编码兼容性、IE11适配、大小写敏感参数等），同时强调纠错等级与尺寸的科学权衡——避免盲目提升纠错率而牺牲可扫性，给出width: 200 + M级纠错覆盖95%实际需求的落地建议，助开发者快速、稳定、高效地集成二维码功能。

直接用 qrcode.js 最省事，浏览器端生成不依赖后端，支持 Canvas 和 SVG 输出；Node.js 环境推荐 qrcode（同名但非同一作者），它更轻量、API 更一致。

浏览器里快速生成 Canvas 二维码

这是最常见需求：用户输入文本，页面立刻渲染出二维码图片。用 qrcode.js 只需几行：

• 引入方式：
• QRCode.toCanvas() 直接画到 上，比先生成 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 字符串，含 根节点
• 不支持纠错等级微调（如 L/M/Q/H），默认用 M 级；若内容较长又想压缩尺寸，得换 qrcode 库并显式传 { errorCorrectionLevel: 'H' }
• IE11 兼容性好，但 SVG 中的 viewBox 属性若被 CSS 重置宽高，可能拉伸变形

Node.js 后端生成 Base64 或文件

服务端场景下，qrcode（npm 包名，作者是 soldair）是事实标准。它能输出 buffer、stream、base64，也支持写入文件系统。

• 安装：npm install qrcode（别装错成 qrcodejs 或 qrcode-generator）
• 异步 API 是主流：await QRCode.toDataURL('data:text/plain;base64,SGVsbG8gd29ybGQh') 返回 base64 字符串，适合嵌入 HTML
• 同步方法 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，优先缩短链接，而不是硬提纠错等级。

理论要掌握，实操不能落！以上关于《生成二维码的JavaScript方法及库推荐》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！