qrcode.js支持颜色、logo、模块形状等定制，但需严守边界：colorDark/colorLight须用高对比度纯色（如#1e40af/#ffffff），logo尺寸≤二维码宽20%且margin≥12，模块形状仅限'square'或'rounded'以保扫码率，toCanvas高清导出需按devicePixelRatio缩放canvas物理尺寸。
直接用 qrcode.js 就能实现大部分样式定制，但「美化」不等于「随便改」——颜色、logo、模块形状这些操作都有明确边界，改错一个参数，扫码率可能从 99% 掉到 30%。
colorDark / colorLight 配色为什么扫不出？
这两个配置项控制前景色和背景色，但不是所有颜色组合都可靠。深色前景+浅色背景是唯一被主流扫码设备（微信、支付宝、iOS 原生相机）广泛验证的方案。
-
colorDark必须是纯色、不透明、对比度 ≥ 7:1（比如#1e40af可，rgba(30,64,175,0.8)不行） -
colorLight不能为transparent或渐变；设成#ffffff最稳，#f9fafb在弱光下偶发识别失败 - 避免使用 HSL/HSV 格式值，部分老版安卓 WebView 会解析失败，只认十六进制
加 logo 后扫码失败的三个硬伤点
logo 不是“贴图”，而是覆盖在二维码中心区域的图像层，必须避开定位图案（三个角上的大方块）和校正图案（中间的小方块），否则纠错能力归零。
- logo 尺寸不能超过二维码总宽的 20%，例如 300px 宽的码，logo 最大建议 60px × 60px
-
margin参数必须 ≥ 12，否则 logo 会压住定位点边缘；设成 8 或 0 是常见误配 - logo 图片必须已加载完成再绘制，否则
ctx.drawImage()会画出空白——别在new QRCode()回调里直接 draw，应监听logoImg.onload
dotsOptions.type 改模块形状影响扫码吗？
可以改，但仅限于视觉微调，不能改变编码逻辑。不同 type 对扫码成功率有实测差异：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
'square'：默认，兼容性最好，工业扫码枪首选 -
'rounded'：圆角模块，手机扫码无压力，但部分低端安卓机识别略慢 -
'classy'和'classy-rounded'：带斜切边，视觉酷，但微信 8.0.45 以下版本偶发漏扫 -
'dots'：点状模块，仅适合装饰性场景，支付类二维码禁用
toCanvas() 导出高清图时 canvas 模糊的根本原因
不是代码写错了，是 canvas 渲染机制本身限制：CSS 设置的宽高 ≠ 实际像素尺寸。浏览器按设备像素比（window.devicePixelRatio）缩放显示，但 canvas 默认只有 300×150 物理像素。
- 修复步骤：先设
canvas.width = canvas.offsetWidth * window.devicePixelRatio，再设canvas.height同理 - 调用
QRCode.toCanvas()时，width参数必须等于你刚设的canvas.width，否则内容会被拉伸或裁剪 - 导出 PNG 时务必传
toDataURL('image/png', 1)，省略第二个参数在 Safari 上会强制降质
真正难的不是“怎么加 logo”，而是算准 logo 的 x/y 坐标——它得避开所有功能图形，又不能太小导致看不清，这个平衡点没工具能自动帮你找，只能靠真机反复扫。
