html-to-image是当前最稳、最轻、最可控的前端dom转图方案，支持png/jpeg/svg/blob等格式，精准保留样式、字体与布局，但无法捕获css动画、webgl、跨域iframe及canvas上下文。
直接用 html-to-image 是当前最稳、最轻、最可控的前端方案；若需服务端批量处理或截图整页（含滚动、登录态），html2image（Python）或 selenium 更合适——别一上来就选 PhantomJS 或 Puppeteer，它们已过时或配置太重。
toPng() 调用后图片模糊？调 pixelRatio 不是万能解
模糊常因设备像素比没对齐或字体未嵌入导致。仅设 pixelRatio: 2 不够，必须同步确保：
-
skipFonts: false（默认值，但显式写上更安全） - 目标节点内所有字体已通过
@font-face声明，且字体文件可跨域加载（否则 fallback 到系统字体） - 避免在目标元素上使用
transform: scale()等 CSS 缩放，它会让 canvas 渲染失真 - 若用
toJpeg()，务必设quality: 0.92以上，低于 0.85 明显发虚
html2image 在 Python 中截不到动态内容？等 DOM 就绪才是关键
html2image 默认不等 JS 执行完就截图，所以 Vue/React 渲染的区域常为空白。解决方法不是加 time.sleep()，而是用浏览器原生机制：
- 传
wait_for='div#chart-rendered'，让工具等指定 DOM 节点出现 - 对单页应用，用
wait_for='window.__DATA_READY__ === true'（需前端挂载全局标志） - 避免用
delay=3这类固定等待，网络抖动时不可靠 - 本地 HTML 文件路径要转成
file://URL，Windows 下注意盘符大写（file:///C:/...）
为什么 toSvg() 导出后文字变方块？字体没“实嵌”进 SVG
toSvg() 不像 PNG/JPEG 那样渲染成位图，它把 DOM 结构转为矢量描述，因此依赖字体真实可用。常见失效场景：
- CSS 中用了 Google Fonts 等远程字体，但 SVG 不会自动下载并嵌入字形数据
- 本地字体用了
local('xxx')，而用户系统无该字体，fallback 失败 - 未启用
embedWebFonts: true（html-to-imagev1.10+ 支持） - SVG 渲染时浏览器禁用了
foreignObject（部分旧版 Safari），此时应降级用toPng()
本地 HTML 文件用浏览器命令截图失败？路径和协议必须匹配
Chrome 的 Capture full size screenshot 命令只支持 http:// 或 https:// 协议页面，file:// 会被拒绝或截半页。正确做法只有两个：
- 用
python -m http.server 8000启服务，然后访问http://localhost:8000/index.html - 用 VS Code 插件 Live Server（自动启
http://127.0.0.1:5500） - 千万别手动改地址栏为
http://前缀——那是无效伪造，浏览器仍按 file 协议处理 - 若必须离线运行，改用
selenium+chromedriver加载file://路径，它不受此限制
真正难的不是选哪个库，而是判断「哪部分内容必须精确还原」：CSS 动画帧、WebGL 图形、iframe 跨域内容、Canvas 绘图上下文——这些 html-to-image 和 html2image 都无法捕获，得换思路，比如用 Puppeteer 截 iframe 内容，或让后端提前渲染 Canvas 数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
