html-to-image是目前最稳的前端导出方案，因其自动内联资源、双引擎降级、精准还原伪元素及现代CSS，且默认清晰度更高；需设pixelRatio≥2防模糊，等待资源加载完成再调用。
直接用 html-to-image 是目前最稳的前端导出方案，比 html2canvas 更少踩坑、默认清晰度更高，尤其适合需要保留 CSS 样式和响应式布局的场景。
为什么 html-to-image 比 html2canvas 更适合导出网页内容
不是所有“转图”需求都一样：html2canvas 是纯 Canvas 渲染，对伪元素、transform、CSS Grid、字体抗锯齿支持弱，且默认不处理跨域图片或自定义字体；而 html-to-image 在底层做了资源预加载 + 样式快照 + 双引擎自动降级（Canvas/SVG），能更可靠地还原视觉效果。
-
html2canvas遇到background-image: url(https://...)且未配置useCORS: true时会白屏，且即使开了 CORS，某些 CDN 字体仍可能 fallback 到系统字体 -
html-to-image自动内联外部资源（如图片转data:URL、字体转 Base64），只要原始页面能正常显示，转换结果就大概率一致 - 对
::before/::after、clip-path、filter等现代 CSS 支持更好，不需要手动 patch 或 hack
toPng() 导出模糊？重点调这三个参数
模糊本质是像素密度不足，不是算法问题。默认 pixelRatio: 1 在 Retina 屏上必然糊，必须显式提升。
-
pixelRatio: 2或3：推荐从2起步，3适合海报/打印场景，但内存占用翻倍 -
quality: 0.95：仅对toJpeg()有效，toPng()无损，无需设 quality -
backgroundColor: '#fff'：避免透明背景在部分浏览器中渲染发灰，尤其当目标元素含半透明叠加时
错误写法：toPng(el, { pixelRatio: 1 }) —— 这等于放弃高清适配。
立即学习“前端免费学习笔记（深入）”；
动态内容没截全？等资源加载完成再触发
常见现象：图表 canvas、懒加载图片、异步渲染的 React/Vue 组件在截图里是空白或占位符。这不是库的问题，是时机错了。
- 不要在 DOM 插入后立刻调用
toPng()，要等内部资源 ready - 图表类：监听图表库的
rendered或finished事件（如 ECharts 的chart.on('finished', ...)） - 图片类：统一用
Promise.all([...imgElements.map(img => img.complete ? Promise.resolve() : new Promise(r => img.onload = r))]) - 通用兜底：加
setTimeout(() => toPng(...), 100)最多只适用于简单场景，不推荐生产环境使用
toSvg() 和 toPng() 怎么选
别只看格式名，关键看用途：
- 要无限缩放、编辑文本、嵌入 PDF 或打印大尺寸海报 → 用
toSvg()，但注意它不支持box-shadow、filter、mask等光栅化特性 - 要分享到微信、钉钉、邮件，或做缩略图 → 用
toPng()，兼容性最好，iOS/Android 微信内都能点开查看 - 想压缩体积又接受轻微画质损失 → 用
toJpeg()，但必须设backgroundColor（JPEG 不支持透明）
一个容易被忽略的细节：toSvg() 输出的是字符串，不是 data: URL，要转成图片需额外包裹一层 new Blob([svgString], {type: 'image/svg+xml'}) 再生成 URL。
