HTML生成二维码快速教程

本文详解如何用qrcode.js在前端高效、稳定地生成可被各类设备可靠识别的二维码，强调一行代码即可实现零后端依赖、无网络请求的纯前端方案，并重点破解四大实战痛点：避免“QRCode is not defined”报错的关键加载时机与DOM存在性校验、确保移动端高识别率所必需的最小尺寸（≥200px）、充足留白（≥20px margin）和中等容错等级（M级）；以及导出高清图与精准嵌入logo时必须适配devicePixelRatio、手动重设canvas像素尺寸并用原生Canvas API绘制的底层技巧——真正决定成败的，从来不是“能不能生成”，而是“扫不扫得进”。

直接用 qrcode.js，一行 JS 就能生成，不依赖后端、不发请求、兼容主流浏览器。别用老版本 qrcode-generator，它不支持现代模块加载，也缺 canvas 导出等关键能力。

QRCode is not defined 怎么办

这是最常见报错，本质是脚本没加载完就执行了 new QRCode()。

• 必须放在 之前，不能放 里加 async
• 如果必须放 ，得包在 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 都稳定识别。留白、尺寸、容错、像素密度这四点，漏一个都可能让用户扫三次才成功。

本篇关于《HTML生成二维码快速教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！