二维码库编码html字符串需先将其转为纯文本（如outerhtml），再经空白压缩、零宽字符清理和uri编码后传入；超2kb会显著降低扫码成功率。
用 qrcode 库直接编码 HTML 字符串
HTML 本身不是图片，不能“直接转”成二维码；真正能扫的二维码内容，是字符串——所以你要转的其实是 HTML 的文本表示（比如 <div>Hello</div> 或完整页面的 document.documentElement.outerHTML）。qrcode（Node.js）或 qrcode-generator（前端）这类库，输入必须是字符串，不是 DOM 节点或文件路径。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 后端生成：用
qrcode.toString(htmlString, { type: 'utf8' })得到 base64 或 SVG 字符串，再嵌入 HTML 的<img src="data:image/svg+xml;base64,..." alt="如何将html转换成二维码" > - 前端生成：先用
new XMLSerializer().serializeToString(document.documentElement)获取完整 HTML 字符串，再喂给qrcode.generate()（注意长度限制） - 别直接传
document.body.innerHTML——它漏了和 DOCTYPE，扫码后还原的页面可能不完整 - 超过 2KB 的 HTML 字符串，二维码容错率会急剧下降；手机扫描成功率明显降低
为什么 qr-code-generator 在浏览器里报 Invalid data
这个错误几乎总是因为字符串里包含了不可见控制字符（比如换行、零宽空格、BOM），或者用了未转义的双引号/尖括号导致 JSON 解析失败——而很多 HTML 字符串恰好自带这些。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
htmlString.replace(/[\u200B-\u200D\uFEFF]/g, '')清掉零宽字符 - 用
encodeURIComponent(htmlString)编码后再传给生成器（接收端需decodeURIComponent还原） - 避免在 HTML 字符串里保留原始缩进和换行；用
htmlString.replace(/\s+/g, ' ').trim()压缩空白 - 如果 HTML 含有内联
<script></script>，某些生成器会因安全策略拒绝处理（尤其 CDN 加载的库），换本地引入的qrcode.js更稳
生成带样式的二维码（如 logo、颜色、圆角）要绕开哪些坑
纯 qrcode 库只输出矩阵数据，加样式得靠 Canvas 或 SVG 合成——这意味着你不能依赖“一键生成”，必须手动叠加。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Canvas 绘制时，logo 图片必须已加载完成（监听
img.onload），否则 canvas 里一片空白 - logo 尺寸别超过二维码模块宽度的 25%，否则中心区域识别率暴跌（微信/支付宝都容易扫不出）
- 改颜色别只改前景色：深色背景+浅色模块会导致反光误读，优先用黑底白模块或白底黑模块
- 圆角是伪效果——实际是 canvas 画完后用
clip()裁切路径，但裁切后边缘像素模糊，部分扫码器拒识；不如用 SVG 的rx/ry属性更可靠
用 html2canvas 截图再转二维码？这思路危险
这不是“转 HTML 成二维码”，而是“把 HTML 渲染结果截图，再把图塞进二维码”——等于把一张 PNG 塞进二维码，结果是：扫出来是一张图，不是可交互的 HTML 页面。完全违背原始需求。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果你真需要扫码后打开一个页面，正确路径是：生成含该 HTML 内容的 URL（比如托管在临时服务或 data URL），再对这个 URL 生成二维码
-
html2canvas+qrcode组合只适用于“生成宣传海报图”，且海报尺寸必须严格控制在 300×300px 以内，否则二维码模块过小无法识别 - data URL 方式（
data:text/html;charset=utf-8,<h1>Hi</h1>）最轻量，但 Safari 对长 data URL 支持差，超 2000 字符就可能截断
真正卡住人的地方，从来不是“怎么调函数”，而是没想清楚：扫码之后用户到底要看到什么、能做什么。HTML 字符串太长扫不出来，URL 太短又存不下逻辑，中间那个平衡点——得靠真实设备多试几次才摸得准。
