topng()导出模糊的关键是pixelratio未适配设备像素比，默认1在retina屏必糊；应设为2或动态取window.devicepixelratio，同时等待资源加载完成并显式设置backgroundcolor。
toPng() 导出模糊？关键就调 pixelRatio
模糊不是库的问题，是像素密度没跟上设备。默认 pixelRatio: 1 在 Retina 屏、高分屏上必然糊——浏览器用 2 倍物理像素画 1 倍逻辑像素，你只给 1 倍数据，自然发虚。
-
pixelRatio: 2是安全起点，覆盖绝大多数高清屏（MacBook、iPhone、Windows HiDPI） -
pixelRatio: 3适合海报/打印场景，但内存占用翻 3 倍，大 DOM 下易触发浏览器内存警告 - 别写
toPng(el, { pixelRatio: 1 })——这等于主动放弃清晰度 - 如果目标设备明确（如仅导出给微信分享），可固定设为
2；不确定时，用window.devicePixelRatio || 2动态取值更稳妥
动态内容截不全？等资源 ready 再调用
图表空白、图片缺失、Vue/React 组件没渲染出来——八成是调用太早。html-to-image 不会自动等异步资源加载完，它只克隆当前 DOM 快照。
- ECharts：监听
chart.on('finished', () => toPng(el))，别用setOption后立刻截图 - 懒加载图片：收集所有
<img>元素，用Promise.all(imgs.map(img => img.complete ? Promise.resolve() : new Promise(r => img.onload = r)))等加载完成 - 通用兜底慎用：
setTimeout(() => toPng(), 300)只适用于静态内容+无图片的极简场景，生产环境必须按资源类型精准等待
背景发灰或透明失效？显式设 backgroundColor
即使原始元素是透明背景，toPng() 输出在部分浏览器（尤其是 Safari 和旧版 Chrome）里会渲染成灰蒙蒙一片——这是 canvas 合成时 alpha 通道处理差异导致的。
- 加
backgroundColor: '#fff'能立刻解决发灰问题，适合大多数含半透明叠加的设计 - 若真需要透明背景（如贴图素材），必须用
toPng(el, { backgroundColor: null })，且确保目标元素本身没继承非透明父级背景 -
toJpeg()不支持透明，强制设backgroundColor才能输出，否则报错
伪元素、filter、clip-path 渲染失败？优先选 html-to-image，别硬刚 html2canvas
遇到 ::before/::after 不显示、阴影/模糊滤镜丢失、裁剪路径错位，大概率是渲染引擎能力边界问题。
- html2canvas 是纯 Canvas 渲染，对现代 CSS 支持弱，
transform、CSS Grid、字体抗锯齿都容易崩，且需手动配useCORS: true才能加载跨域图 - html-to-image 底层自动做资源内联（图片转
data:URL、字体转 Base64）、样式快照、双引擎降级（Canvas/SVG 自动 fallback），开箱即用支持伪元素和复杂布局 - 如果必须用 html2canvas，得自己 patch：
ignoreElements: el => el.classList.contains('no-capture')过滤干扰节点，再加logging: true查日志定位漏掉的样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
