html5网页如何变成二维码

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 大小。