html-to-image是当前最稳、最轻、最可控的前端截图方案；服务端批量处理或整页滚动截图应选html2image或puppeteer；topng模糊需检查pixelratio对齐、字体嵌入及禁用css缩放；tosvg文字变方块因字体未实嵌；file://协议不支持全页截图，须启用本地http服务。
直接用 html-to-image 是当前最稳、最轻、最可控的前端方案；若需服务端批量处理、整页滚动截图或带登录态渲染，html2image（Python）或 Puppeteer 更合适——别一上来就选 PhantomJS 或旧版 Puppeteer，它们已过时或配置太重。
toPng() 导出模糊？关键不在 pixelRatio
调 pixelRatio: 2 不是万能解。模糊常因设备像素比没对齐或字体未嵌入导致，必须同步检查以下几点：
-
skipFonts: false（默认值，但显式写上更安全） - 目标节点内所有字体已通过
@font-face声明，且字体文件支持跨域加载（否则 fallback 到系统字体，样式崩） - 避免在目标元素上使用
transform: scale()等 CSS 缩放，它会让 canvas 渲染失真 - 若用
toJpeg()，务必设quality: 0.92以上，低于0.85明显发虚
toSvg() 文字变方块？字体没“实嵌”进 SVG
toSvg() 不渲染成位图，而是把 DOM 转为矢量描述，因此依赖字体真实可用。常见失效场景：
- CSS 中用了 Google Fonts 等远程字体，但 SVG 不会自动下载并嵌入字形数据
- 本地字体用了
local('xxx')，而用户系统无该字体，fallback 失败 - 未启用
embedWebFonts: true（html-to-imagev1.10+ 支持） - 部分旧版 Safari 禁用
foreignObject，此时应降级用toPng()
本地 HTML 文件用浏览器命令截不了全页？协议不匹配
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协议处理
真正难的不是调哪个函数，而是判断「内容是否已稳定渲染」和「字体是否可被工具实际访问」——这两点漏掉一个，导出就大概率失败或失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
