HTML5无法直接生成二维码，需借助JavaScript库（如qrcode.js）将字符串转为二维码图案并渲染到canvas或img；扫码则需getUserMedia+jsQR等组合实现，且须HTTPS环境。
HTML5 里没法直接“生成二维码”，得靠 JavaScript 库
HTML5 本身不提供二维码生成功能，canvas 或 svg 只是渲染载体，真正把字符串转成二维码图案，必须用 JS 库（比如 qrcode.js 或 qr-code-generator）。别在 <img src="qrcode?text=xxx"> 这类后端方案上绕弯——纯前端嵌入，核心就是「JS 生成 → 渲染到 DOM」。
用 qrcode.js 在页面里实时生成二维码（最简可行）
推荐 qrcode.js（轻量、无依赖、支持中文），CDN 直接引入：
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/dist/qrcode.min.js"></script>
然后用 QRCode.toCanvas() 或 QRCode.toDataURL() 输出到页面：
const canvas = document.getElementById('qrcode-canvas');
QRCode.toCanvas(canvas, 'https://example.com', { width: 200 }, (error) => {
if (error) console.error('QR code error:', error);
});
-
toCanvas()直接画到<canvas>，适合动态更新（比如输入框改完立刻重绘） -
toDataURL()返回 base64 字符串，可赋给<img src="...">>，但每次生成都新建字符串，内存稍多 - 中文内容务必加
type: 'Byte'参数，否则乱码：{ type: 'Byte', width: 200 }
扫码功能不是 HTML5 原生能力，得调用设备摄像头
所谓“HTML5 扫码”，实际是 MediaDevices.getUserMedia() 拿摄像头流 + canvas 截帧 + 第三方解码库（如 jsqr）识别。浏览器不会自动扫码，你得自己写帧循环和解码逻辑。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 必须 HTTPS（或
localhost）环境，getUserMedia()在 HTTP 下被禁用 - 扫码是持续过程：用
requestAnimationFrame()定期从<video>抓帧 → 绘到离屏canvas→ 传给jsQR()解析 -
jsQR()不处理旋转/模糊/低对比度图像，实际场景中失败率高，别指望它替代原生 App 扫码体验
移动端适配和常见坑
真机上最容易翻车的不是代码，是权限和尺寸：
- iOS Safari 对
getUserMedia()要求严格：video 元素必须playsinline+autoplay，且用户手势触发（比如按钮点击后才调用） - 二维码 canvas 宽高设为偶数像素（如 200×200），某些安卓机型对奇数尺寸渲染异常
- 扫码时若页面缩放（双指 pinch），
video流分辨率可能错乱，建议加<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> - 别用
document.write()动态插入二维码脚本——现代浏览器会阻塞并清空 DOM
生成和扫码是两套逻辑，混在一起容易失控；先确保生成稳定，再考虑扫码，后者涉及权限、性能、容错，复杂度高得多。
