qrcode.js是纯前端轻量级二维码生成方案，需引入qrcode.min.js、传完整URL、处理中文编码、注意toDataURL跨域与长度限制，并确保HTTPS及足够尺寸以适配移动端扫码。
用 qrcode.js 在浏览器里直接生成二维码图片
纯前端生成二维码，不发请求、不依赖后端，qrcode.js 是目前最轻量也最稳的选择。它不操作 DOM，只返回 canvas 或 svg 元素，你塞进页面就行。
常见错误是直接引入未打包的源码（比如 GitHub 上的 src/ 目录），导致报 ReferenceError: QRCode is not defined——必须用官方发布的 qrcode.min.js 或通过 npm 安装后构建。
- 从 官网 下载
qrcode.min.js，用<script>引入 - 确保目标容器有固定宽高，否则
canvas渲染可能被拉伸或截断 - 传入的 URL 必须是完整地址（含
https://），否则扫码会跳转失败；相对路径如/login会被解析成当前域名下的路径，但多数扫码器不识别 - 中文内容要先
encodeURIComponent()，否则乱码或生成失败
QRCode.toCanvas(canvasEl, encodeURIComponent('你好世界'), { width: 200 })
toDataURL() 导出 base64 图片链接的坑
想把二维码变成可分享的图片链接？toDataURL() 看似简单，但实际容易踩三个点：跨域、MIME 类型、长链接截断。
如果二维码内容是带参数的 URL（比如 https://example.com?code=abc&utm_source=qr），直接传进去，生成的 data URL 可能超 2MB，部分浏览器（尤其是 iOS Safari）会静默失败，控制台也不报错。
立即学习“前端免费学习笔记（深入）”；
- 优先用
toCanvas()+canvas.toDataURL('image/png')，比toDataURL()主动调用更可控 - 指定 MIME 类型为
image/png，避免某些安卓扫码器不认image/jpeg - 导出前检查内容长度：
if (text.length > 1000) {...}，过长内容建议缩短或换短链服务 - 不要把 data URL 当作永久链接用——它只是临时快照，内容改了就得重生成
不用第三方库：用 canvas 手搓最简二维码（仅限数字+字母）
如果你只要扫「纯英文+数字」的短链接（比如 https://t.co/abc123），且明确不想加任何外部依赖，可以绕过整个 QR 编码逻辑，用 canvas 手绘一个简易版本。这不是标准 QR，但够用。
原理是把字符串 hash 成固定长度数字，再映射为 8×8 的黑白格子。它不能容错、不能纠错、不兼容标准扫码器，但对内网调试、演示场景足够快、零依赖。
- 只适合长度 ≤ 32 字符、无特殊符号的文本
- 用
Array.from({length: 64}, (_, i) => (hash(text) >> i) & 1)生成点阵 - 每个格子画
fillRect(x, y, size, size)，黑块填#000，白块留背景 - 别指望微信扫一扫能扫出来——它只认 ISO/IEC 18004 标准 QR，这个只是视觉近似
移动端扫码失败？重点查这三件事
PC 上一切正常，手机一扫就失败，大概率不是代码问题，而是环境细节没对齐。
- 页面必须是 HTTPS（或
localhost），iOS Safari 和新版 Chrome 会直接禁用canvas的toDataURL()来源非安全上下文 - 二维码尺寸不能小于 200×200px，iPhone 摄像头默认聚焦距离约 25cm，太小的图模糊后无法识别
- 背景对比度不够：别用浅灰文字配白色背景，扫码器靠边缘检测，至少保证 70% 以上明暗差
- 测试时别截图再扫——截图压缩、缩放都会破坏定位图案，真机打开网页直扫
复杂点在于：同一个二维码，在安卓上扫得出来，iPhone 上扫不出来，往往是因为 Safari 对 canvas 像素精度的处理更严格，哪怕一个像素偏移，定位框就锁不住。这时候宁可放大到 256×256，也不要凑合 200×200。
