HTML如何做二维码_html页面生成二维码方法【速查】
作者：袖梨
2026-07-21
使用qrcode.js一行生成二维码，需确保脚本在</body>前加载或包裹在DOMContentLoaded中，设置width≥200、margin≥20px、correctLevel为M级， canvas导出需适配devicePixelRatio并手动绘制logo。
直接用 qrcode.js，一行 JS 就能生成，不依赖后端、不发请求、兼容主流浏览器。别用老版本 qrcode-generator，它不支持现代模块加载，也缺 canvas 导出等关键能力。
QRCode is not defined 怎么办
这是最常见报错，本质是脚本没加载完就执行了 new QRCode()。
-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/qrcode.min.js"></script>必须放在</body>之前，不能放<head>里加async - 如果必须放
<head>，得包在DOMContentLoaded事件里，且确保容器 DOM 已存在 - 别在
document.getElementById("qrcode")返回null时直接 new —— 先加个存在性判断
移动端扫不出来？调 width、margin 和 correctLevel
手机摄像头对焦距离和解码算法很挑，不是“画出来就能扫”。90% 的失败源于尺寸太小、留白不足或容错太低。
-
width和height别低于180（推荐200或250） - 容器元素加
margin: 20px，二维码四周必须有至少 4 模块宽度的空白（margin是最稳的留白方式） -
correctLevel改成QRCode.CorrectLevel.M或Q，默认L容错率只有 7%，稍有模糊或角度偏移就失败 - 深色码 + 纯白底最可靠，避免用
colorDark: "#999"这类灰度接近的组合
导出高清图片或带 logo 怎么做
QRCode.toCanvas() 默认输出模糊，是因为 canvas 实际像素密度没跟上 CSS 尺寸；logo 覆盖错位，是因为没重算坐标系。
立即学习“前端免费学习笔记（深入）”；
- 先设
canvas.width = canvas.offsetWidth * window.devicePixelRatio，再设height同理 - 调
QRCode.toCanvas(canvas, url, { width: canvas.width })，width参数必须和 canvas 实际像素宽一致 - 导出 base64 时用
canvas.toDataURL('image/png', 1)，第二个参数别省略，否则 Safari 可能降质 - 加 logo 不是“贴图”，得用
ctx.drawImage(logo, x, y, width, height)手动绘制——x/y 要按二维码模块数反推，比如中间 20×20 模块区域，需先算出单模块像素再定位
真正难的不是生成，而是让不同机型、不同光线、不同扫码 App 都稳定识别。留白、尺寸、容错、像素密度这四点，漏一个都可能让用户扫三次才成功。
