HTML无法原生生成二维码，必须依赖JavaScript（如qrcode.js）在浏览器内执行编码算法并渲染到canvas或svg；仅用<img>标签调用第三方API存在隐私、稳定性和CORS风险。
纯 HTML 无法生成二维码——它没有计算能力，必须靠 JavaScript 实现核心逻辑，HTML 只负责结构和展示。
为什么不能只用 <img> 标签直接生成？
有人尝试用类似 <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&text=hello"> 的方式“生成”，这本质是调用第三方在线服务，存在隐私泄露、接口不稳定、域名失效、CORS 限制等风险。一旦网络不通或服务商关闭，页面立即失效。
真正可控的本地生成，必须在浏览器内完成编码（QR Code 算法）+ 渲染（Canvas 或 SVG）。
推荐方案：用 qrcode.js + <canvas> 实现零依赖本地生成
qrcode.js 是轻量、无构建依赖、支持 ES Module 和 script 标签直引的成熟库（注意不是 qrcode-generator 或 qr.js，后者已多年未维护）。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
- 从 CDN 引入最新稳定版
qrcode.min.js（1.5.3 是当前兼容性最稳的版本） - 用
<canvas id="qrcode-canvas">作为渲染目标，避免 DOM 操作开销 - 调用
QRCode.toCanvas()而非toDataURL()，前者更省内存、支持透明背景、避免 base64 字符串膨胀 - 输入文本需做基础校验：
input.value.trim() === ""时跳过生成，防止空码
示例关键代码：
<script src="https://www.php.cn/link/edd5ea0b8d1caa171766ec75e1f3afd9"></script>
<canvas id="qrcode-canvas" width="200" height="200"></canvas>
<input type="text" id="qr-input" placeholder="输入内容">
<button onclick="generateQR()">生成</button>
<script>
function generateQR() {
const input = document.getElementById("qr-input").value.trim();
const canvas = document.getElementById("qrcode-canvas");
if (!input) return;
QRCode.toCanvas(canvas, input, { errorCorrectionLevel: "M", margin: 1 }, (err) => {
if (err) console.error("QR 生成失败：", err);
});
}
</script>
errorCorrectionLevel 和 margin 参数怎么选？
这两个参数直接影响扫码成功率和视觉容错性，但常被忽略：
-
errorCorrectionLevel推荐设为"M"（中等，约 15% 容错），比默认"L"（7%）更鲁棒；"H"虽高（30%），但会使图案变复杂、小尺寸下易识别失败 -
margin必须 ≥ 1（单位：模块宽度），否则部分扫码器会拒识——这是真实踩坑点，很多教程设成 0 导致生成的码扫不出 - 若需导出 PNG，用
canvas.toBlob(callback, "image/png", 1.0)，不要用toDataURL()防止长 base64 卡 UI
移动端扫码失败？检查这三点
生成的二维码在手机上扫不出来，90% 出现在以下环节：
- Canvas 尺寸太小：
width/height建议 ≥ 180px，低于 120px 在 iPhone 上极易识别失败 - 背景对比不足：确保 canvas 父容器无遮挡、无半透明 overlay；避免深色背景配深色码（如黑底黑码）
- 输入含不可见字符：用
input.value.replace(/\u200b-\u200f|\u202a-\u202e/g, "")过滤零宽字符，微信/钉钉粘贴常带这类隐形污染
生成逻辑本身很简单，难的是让每个终端都稳定扫出来——容错设置、尺寸、字符清洗，缺一不可。
