qrcode is not defined 错误源于脚本未加载完成即执行初始化，须确保 qrcode.js 在 dom 元素后加载并绑定 onload 回调，或使用模块化 import；重复生成需手动清空容器，中文内容应 encodeuricomponent 编码，推荐 render: "svg" 避免高 dpi 模糊。
HTML 本身不能直接生成二维码，所谓“动态”是指用 JavaScript 在页面加载后、或用户操作时，把字符串实时转成 canvas 或 svg 元素并插入 DOM——不是靠 <img src> 加载静态图，也不是靠后端吐 URL。
QRCode is not defined 错误怎么修
这不是代码写错了，是脚本根本没加载进来就执行了初始化。qrcode.js 不自动挂全局变量，必须等 <script></script> 下载并解析完再调用。
- 把
<script src="https://cdn.jsdelivr.net/npm/qrcode.js@1.5.3/qrcode.min.js"></script>放在<div id="qrcode"></div>后面，且不要加async（除非你手动监听onload） - 如果用模块化环境（Vite/Webpack），改用
import QRCode from 'qrcode.js'，别依赖全局QRCode - 动态插入 script 标签时，必须等
script.onload = () => { new QRCode(...) }，不能appendChild后立刻 new
重复生成二维码时 canvas 报错 Canvas is already in use
QRCode 构造函数不自动清空容器，第二次调用会复用旧 canvas 元素，导致冲突。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每次生成前先清空容器：
document.getElementById("qrcode").innerHTML = "" - 更稳妥的做法是只删子元素：
el.querySelector("canvas")?.remove()或el.querySelector("svg")?.remove() - 如果用的是
render: "svg"，注意innerHTML = ""会重置整个 DOM 状态，但比残留旧码安全
扫不出、模糊、中文乱码的三个硬坑
这些问题几乎都出在参数或渲染上下文，和库本身关系不大。
- 容错率太低：
errorCorrectionLevel: 'L'时，轻微压缩或污损就扫不出；日常至少设'M'，打印用'H' - 高清屏发虚：canvas 默认不适配
window.devicePixelRatio，必须手动设canvas.width = 200 * dpr、canvas.height = 200 * dpr，再用 CSS 缩回width: 200px，最后ctx.scale(dpr, dpr)绘制 - 中文乱码：若内容含中文或特殊字符，传入前用
encodeURIComponent(text)编码；但如果是完整 URL，只编码参数部分，别把https://也 encode 了
要不要服务端生成？看这三点是否成立
前端生成能覆盖 95% 场景，但以下情况必须后端介入：
- 二维码内容含敏感信息（如临时 token），不能明文出现在前端 JS 里
- 需要精确控制有效期（比如 5 分钟后失效），前端时间不可信
- 要批量导出 2000×2000 高清 PNG，Canvas 渲染内存高、易崩溃，服务端用
qrcodegen（Rust）或python-qrcode更稳
真正容易被忽略的，是样式干扰：哪怕父容器只加了 overflow: hidden 或 transform: scale(0.99)，扫码器就可能完全识别失败——真机测试前，务必关掉所有可疑 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
