qrcode.js 是轻量兼容的二维码生成库，需明确编码内容并正确配置容错等级、尺寸与留白；URL 必须 encodeURIComponent 编码，避免 file:// 协议问题；SVG 渲染更清晰，canvas 可导出图片；加 logo 需避开定位图案且控制尺寸。
用 qrcode.js 在页面里实时生成二维码
HTML5 页面本身不会自动变二维码，得靠 JS 库把目标 URL 或文本内容转成 canvas/svg 图形。最轻量、兼容性好的选择是 qrcode.js（注意不是 qrcode-generator 那个老版本），它不依赖 jQuery，支持 ES Module 和 script 标签直引。
常见错误是直接把整个 document.body 截图——二维码不是截图，是把字符串编码成矩阵图形。所以你要明确「想让别人扫什么」：是当前页面地址？某个 input 里的文本？还是 API 返回的短链？
- 用
QRCode.toCanvas()生成 canvas，再用toDataURL()导出图片，适合需要下载或上传的场景 - 用
QRCode.toString()得到 SVG 字符串，插入 DOM 更清晰、缩放不失真，但 IE 不支持 - 别传超长字符串（比如带完整 query 参数的 URL），
errorCorrectionLevel设'M'或'Q'更稳妥，否则可能报"too large data"
const qrcode = new QRCode(document.getElementById("qrcode"), {
text: window.location.href,
width: 200,
height: 200,
colorDark: "#333",
colorLight: "#fff",
correctLevel: QRCode.CorrectLevel.M
});
扫码后跳转到当前页？注意 URL 编码和相对路径
如果生成的是 window.location.href，看似简单，但实际容易出错：URL 里有中文、空格、#hash、?query，没编码就会被截断或解析失败；更隐蔽的是，开发时本地开 file:// 协议，生成的二维码扫出来是 file:///xxx.html，手机浏览器根本不认。
- 务必用
encodeURIComponent(window.location.href)包一层，再喂给QRCode - 避免
file://场景：调试阶段用http-server或 VS Code Live Server 启一个本地服务 - 如果页面用了前端路由（如 Vue Router 的
history模式），确保服务器对所有路径都返回index.html，否则扫码进来的路径 404
移动端扫码识别率低？调宽高和容错等级
生成的二维码在手机上扫不出来，90% 是因为太小、对比度弱、或没留白边。浏览器渲染 canvas 时默认抗锯齿会模糊边缘，导致扫码引擎无法识别模块边界。
立即学习“前端免费学习笔记（深入）”；
-
width和height别设低于 180px，手机摄像头对焦距离有限，太小扫不到 - 加
margin: 20px给容器，二维码四周必须有足够空白（至少 4 模块宽度），否则很多扫码库直接放弃识别 - 把
correctLevel从默认'L'改成'M'或'Q'，能容忍更多污损和角度倾斜 - 深色码浅色底最稳，别用
colorDark: '#999'这种灰度接近的组合
想让二维码带 logo？别直接 canvas drawImage
很多人想在中间加个小 logo，就用 ctx.drawImage() 盖上去——这会破坏纠错数据区，扫出来经常失败。正确做法是生成后手动修改 canvas 像素，只覆盖中心区域且避开定位图案（三个角上的「回」字）。
- 先用
QRCode.toCanvas()生成原始 canvas - 拿到
ctx，算出中心区域坐标（避开左上、右上、左下三个定位框），再drawImage()贴图 - logo 宽高建议 ≤ 20% 二维码尺寸，且用纯白背景 + 透明通道，否则遮盖模块影响识别
- 更省事的做法：生成 SVG 后用 DOM 操作插入
<image></image>，但要确保 base64 logo 小于 2KB，不然 SVG 渲染卡顿
真正难的不是生成，是让扫出来的结果稳定可预期。URL 编码、容错等级、留白、协议环境，漏掉一个，用户扫十次八次失败，你却还在查 canvas 大小。
