HTML生成二维码方法速查

本文详解如何用qrcode.js在前端一行代码高效生成高兼容、高识别率的二维码，直击开发中常见痛点：解决“QRCode is not defined”报错、规避移动端扫码失败、适配高清屏幕导出及精准添加logo，强调留白、尺寸、容错等级和像素密度四大关键因素——稍有疏忽就可能导致用户反复扫描失败，真正实现“一次生成，处处可扫”。

直接用 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学习网公众号也会发布文章相关知识，快来关注吧！