动态生成html二维码需适配设备像素比、节流重绘、避免样式干扰：canvas须按dpr缩放并css还原尺寸；tocanvas()需节流复用节点；禁用裁剪/透明/变形样式；真机测试且调用clear()防残留。

动态生成 HTML 二维码本身不难，但直接用 qrcode.js 或 QRCode.toString() 输出到页面，常导致模糊、缩放失真、响应慢或移动端扫码失败——根本原因不是库不行，而是没控制好渲染上下文和 DOM 更新节奏。

为什么 canvas 渲染的二维码在高清屏上发虚？

默认 canvas 绘制未适配设备像素比（window.devicePixelRatio），导致物理像素不足，浏览器用插值拉伸，边缘糊成一片。

• 必须手动设置 canvas.width 和 canvas.height 为逻辑尺寸 × window.devicePixelRatio
• 同时用 CSS 将 canvas 显示尺寸设回逻辑尺寸（例如 style="width: 200px; height: 200px;"）
• 调用 ctx.scale(dpr, dpr) 再绘制，否则内容会变小
• 若用 qrcode-generator 等纯 SVG 方案，可绕过此问题，但 SVG 在某些老安卓 WebView 中不支持 foreignObject，导致中文乱码

QRCode.toCanvas() 更新频繁时卡顿甚至崩溃？

每调用一次 toCanvas() 都会清空并重绘整个 canvas，高频触发（如输入框实时生成）会导致重排重绘压力过大，尤其在低端 Android 设备上易卡死。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 加节流：用 setTimeout + 标志位，确保两次调用间隔 ≥ 16ms（≈60fps）
• 复用 canvas 元素：不要每次 document.createElement('canvas')，缓存并复用 DOM 节点
• 避免在 input 事件中直接调用生成函数，改用 debounce 或监听 change + blur
• 若内容只是 URL 变化，且结构固定，可考虑预生成几套常见尺寸的 canvas，切换 display 属性而非重绘

扫码失败？检查这三项 DOM 层级与样式干扰

二维码本身生成正确，但被父容器裁剪、透明度覆盖、或 CSS transform 导致形变，手机摄像头就无法识别。

• 确保二维码容器没有 overflow: hidden 或 clip-path，哪怕只裁掉 1px 边框也会失败
• 禁用 opacity、filter: blur()、transform: scale(0.99) 等任何影响像素精度的样式
• 测试时用真机打开，而不是 DevTools 的“设备模拟”——后者不模拟摄像头对对比度、反光、焦距的敏感性

最常被忽略的是：动态生成后未触发 QRCode.clear()（如果库支持），旧 canvas 数据残留可能污染后续渲染；还有就是把二维码塞进 contenteditable 区域，导致 iOS Safari 自动聚焦并弹出键盘，遮挡扫码视图。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！