HTML二维码不必依赖JavaScript，但实际应用中几乎必须使用JS动态生成，因其需实时将字符串绘制成canvas或svg图像，纯静态HTML无法实现。
HTML二维码必须依赖JavaScript动态生成吗
不是必须，但绝大多数实用场景下确实需要。纯静态HTML无法生成二维码，因为二维码本质是根据字符串实时绘制的图像——它不像普通图片能直接写<img src="qrcode.png">就完事。浏览器原生不支持<qr>这类标签，也没有CSS属性能“把一段URL转成二维码”。所以你看到的所谓“HTML二维码”，实际都是用JS库（比如qrcode.js、qr-code-generator）在DOM里画出来的<canvas>或<svg>。
不用后端也能动态生成HTML二维码的实操方式
只要前端有数据源（比如URL、文本、订单号），就能离线生成。关键不是“有没有服务器”，而是“有没有执行生成逻辑的时机和环境”。
- 最简做法：引入
qrcode.js，调用QRCode.toCanvas()或QRCode.toString()，把结果塞进<div id="qrcode"> - 注意
toCanvas()需传入已存在的<canvas>元素，而toString("svg")返回字符串，可直接用innerHTML插入 - 若页面加载时就要显示，确保JS在DOM就绪后执行，避免
document.getElementById("qrcode")取不到节点 - 移动端要注意
canvas默认DPR缩放问题，扫码模糊时得手动设置canvas.width/canvas.height并用CSS缩放
常见错误：二维码扫不出、内容错、尺寸糊
这些问题几乎都出在生成环节的参数或上下文处理上，而不是“HTML本身不支持”。
-
QRCode.toString()默认输出UTF-8编码的PNG base64，但若输入含中文且没指定type: "svg"或type: "utf8"，可能被截断或乱码 - 用
toCanvas()时漏传errorCorrectionLevel（如"M"），导致长文本生成失败，静默返回空画布 - 把二维码塞进
<div style="width: 200px; height: 200px;">却没设canvas实际像素尺寸，结果被CSS拉伸变形，扫码器识别率骤降 - 在Vue/React中直接操作DOM生成，但组件卸载后没清理
canvas，内存泄漏+重复渲染冲突
要不要服务端生成再返回图片？看这三点
不是技术能不能，而是值不值得。动态生成在前端做，省了HTTP请求和后端压力；但有些场景必须后端介入：
立即学习“前端免费学习笔记（深入）”；
- 要嵌入带签名的动态链接（如
/pay?order=123&sign=abc），且签名逻辑不能暴露在前端，就得由后端拼好URL再生成 - 批量导出PDF含二维码时，前端Canvas转图质量差、不一致，用Node.js的
qrcode-generator更稳 - 企业内网无公网访问能力，但要求所有二维码统一配色/Logo/边框，前端硬编码维护成本高，不如后端统一封装接口
真正容易被忽略的是容错边界：比如用户粘贴了一段5000字符的JSON到输入框，前端库可能直接报RangeError: Invalid string length或卡死，而不是优雅提示“内容超长”。生成前务必用QRCode.isValid()或手动校验长度，别等toCanvas()抛异常才处理。
