最常用稳定方式是使用第三方库而非自研算法；qrcode.js最轻量无依赖，支持多端与多种导出格式；qr-code-generator适合深度控制场景；框架专用库如react-qr-code开箱即用；需注意中文编码、长度限制、高清屏适配及扫码失败等避坑点。
JavaScript 生成二维码，最常用、最稳定的方式是使用成熟的第三方库，而不是自己从零实现 QR 编码算法。目前社区主流的库轻量、易用、支持浏览器和 Node.js，并且能灵活控制样式、容错等级、导出格式（Canvas、SVG、Data URL 等）。
qrcode.js（推荐：简单直接，无依赖）
这是最轻量、最常用的纯 JS 二维码生成库，仅一个文件（qrcode.min.js），不依赖 jQuery 或其他框架，支持浏览器和 Node.js。
- 浏览器中直接用
<script></script>引入，调用QRCode.toCanvas()或QRCode.toDataURL()即可生成 - Node.js 中通过
npm install qrcode安装，支持生成 PNG、SVG、UTF8 字符串等格式 - 支持设置容错等级（L/M/Q/H）、宽高、边距（margin）、颜色（
colorDark/colorLight） - 示例：
<script src="qrcode.min.js"></script>
<script>new QRCode(document.getElementById("qrcode"), { text: "https://example.com", width: 200, height: 200 });</script>
qr-code-generator（适合需要深度控制或离线环境）
这是一个无依赖、纯算法实现的库（源自日本作者的 C 版本移植），代码清晰、体积小（约 15KB），适合嵌入式或对包大小敏感的场景。
- 不封装 DOM 操作，只负责生成二维码数据矩阵（二维数组），需自行渲染（比如用 Canvas 画点）
- 因此更灵活：可自定义像素绘制逻辑、适配 Retina 屏、叠加 logo、生成 ASCII 二维码等
- 支持所有标准 QR 版本（1–40）和四个容错等级，也支持 Kanji 模式
- 适合进阶需求，比如在小程序、Web Worker 或低配设备中运行
react-qr-code / vue-qrcode（框架专用，开箱即用）
如果你用 React 或 Vue，官方生态里有维护良好的组件封装，省去手动挂载和更新逻辑。
立即学习“Java免费学习笔记（深入）”；
-
react-qr-code：基于 SVG 渲染，响应式友好，支持动态 props 更新，无外部依赖 -
vue-qrcode（Vue 2/3 均有对应版本）：支持 v-model 绑定、插槽自定义背景、内置下载按钮 - 二者都内置了错误处理（如空值、超长文本自动截断提示），适合业务项目快速集成
注意避坑的几个关键点
生成二维码不是“输字符串就完事”，实际开发中常遇到这些情况：
-
中文或特殊字符乱码：确保传入的文本已 UTF-8 编码（浏览器中一般自动处理，Node.js 中建议用
encodeURIComponent(str)包裹再生成） - 内容超长导致失败：QR 码容量有限（例如 Version 1 M 等级最多 70 字符）。可启用自动降级（降低容错）或提前校验长度
-
高清屏模糊：Canvas 渲染时未考虑
window.devicePixelRatio，需手动缩放 canvas 的width/height并用 CSS 缩放显示尺寸 - 扫码失败：避免背景色太浅（如纯白底+浅灰码）、模块过小（建议单模块 ≥ 4px）、或添加了遮挡 logo 但未预留足够 quiet zone（四周空白区应 ≥ 4 模块宽）
