HTML如何做二维码_html页面生成二维码方法【速查】

时间：2026-07-21 11:11:47 编辑：袖梨来源：一聚教程网

使用qrcode.js一行生成二维码，需确保脚本在</body>前加载或包裹在DOMContentLoaded中，设置width≥200、margin≥20px、correctLevel为M级， canvas导出需适配devicePixelRatio并手动绘制logo。

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

这是最常见报错，本质是脚本没加载完就执行了 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 —— 先加个存在性判断

手机摄像头对焦距离和解码算法很挑，不是“画出来就能扫”。90% 的失败源于尺寸太小、留白不足或容错太低。

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 都稳定识别。留白、尺寸、容错、像素密度这四点，漏一个都可能让用户扫三次才成功。