html2canvas 渲染空白或白图的主因是跨域资源加载失败、不支持部分 CSS 属性及 dom 状态异常；需确保元素可见、图片同源或配 CORS、禁用 transform/Filter 等特性，并等待字体加载完成。
用 html2canvas 渲染页面区域却空白或只出白图
常见现象是调用 html2canvas 后返回的 canvas 是纯白的，或者只渲染出部分元素（比如文字没了、背景色消失、SVG 不见）。根本原因不是代码没跑，而是它无法跨域加载资源、不支持某些 CSS 属性、且对 DOM 状态敏感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标 DOM 元素已完全挂载且可见（
display: none或visibility: hidden的容器会被跳过） - 图片资源必须同源，或服务端已配置
CORS头（否则html2canvas会静默失败，不报错但 canvas 空白） - 避免使用
transform: scale()、filter、mask等未被完全支持的 CSS 特性；可临时加html2canvas({ useCORS: true, allowTaint: false }) - 如果内容含 Web Font，需等字体加载完成再调用 —— 用
document.fonts.ready.then(...)包裹
dom-to-image 导出 SVG 或 PNG 时样式丢失
这个库比 html2canvas 更依赖 CSSOM 解析，一旦遇到内联样式优先级冲突、CSS 变量未展开、或 @media 查询生效但当前视口不匹配，就容易漏样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
!important或动态插入的 style 标签；把关键样式提前写进 - CSS 变量要手动替换：用
getComputedStyle(el).getPropertyValue('--my-color')取值后内联到对应元素上 - 导出前临时移除
@media print或@media (max-width: 768px)等可能干扰布局的规则（document.styleSheets可遍历禁用） - 导出 SVG 时若含
服务端生成 HTML 图片（Node.js）时 PhantomJS 已淘汰，该选什么
PhantomJS 停更多年，现在主流是 Puppeteer 或 Playwright。它们本质是控制真实浏览器，所以兼容性好，但启动慢、内存高，不适合高频小图生成。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 简单静态页 → 用
puppeteer.launch({ headless: true })+page.screenshot({ fullPage: true })，注意设置viewport宽高避免截断 - 需要等 JS 渲染完成 → 不要用
page.waitForTimeout(2000)，改用page.waitForFunction('window.__DATA_READY__ === true')这类信号量 - 字体缺失？在 docker 镜像里装系统字体（如 ubuntu 加
fonts-noto-cjk），或用--font-render-hinting=none启动参数缓解 - 别让每个请求都启一个浏览器实例 —— 复用
browser实例，用browser.newPage()分配轻量 page
生成的图片模糊、文字锯齿、缩放失真
这不是代码逻辑错，而是像素密度和设备像素比（dpr）没对齐。浏览器默认按 1x 渲染，但高清屏实际是 2x 或 3x，直接截图就糊。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 前端用
html2canvas时加scale: window.devicePixelRatio参数，同时 canvas 宽高设为el.offsetWidth * window.devicePixelRatio - Puppeteer 中设置
page.emulateMediaType('screen')和page.setViewport({ width, height, deviceScaleFactor: 2 }) - 后端生成时若用 Chromium，启动参数加上
--force-device-scale-factor=2 - 导出 PNG 后别用 img 标签直接拉伸显示 —— 按原始尺寸设
width/height，靠 CSStransform: scale()缩放
有些问题表面是“转不出来”，其实是资源加载时机、CSS 解析边界、或像素比错位导致的——这些点不显式报错，但会默默失效。调试时先确认目标元素是否真被渲染到了可视 DOM 树里，再查网络面板有没有 403 图片、控制台有没有字体警告。