Puppeteer 截图空白或不完整，因未等待 DOM 和 JS 渲染完成；应使用 waitUntil 选项并配合 waitForSelector 等待关键元素，处理滚动、缩放、字体加载等问题。
用 Puppeteer 截图 HTML 页面时，为什么生成的图片是空白或不完整？
根本原因通常是页面没等 DOM 渲染完、JS 执行完就截了。Puppeteer 默认 page.screenshot() 不等待任何动态内容，只抓当前 DOM 快照。
- 确保用
page.goto(url, { waitUntil: 'networkidle0' })或更稳妥的waitUntil: 'domcontentloaded'+ 手动page.waitForSelector()等关键元素 - 如果页面依赖 React/Vue，得等框架挂载完成，比如等一个带
data-loaded="true"的根节点出现 - 截图前加
await page.evaluate(() => window.scrollTo(0, 0))，避免因滚动位置导致部分内容被裁掉
Node.js 里用 html2canvas 生成图片，为啥字体/样式全乱了？
html2canvas 是纯前端方案，在 Node.js 里跑不起来——它必须在浏览器环境执行。强行用 JSDOM 模拟会失败，因为不支持 canvas 渲染、字体加载、CSS transform 等核心能力。
- 别在服务端直接 require
html2canvas，它不是为 Node 设计的 - 真要服务端渲染，选 Puppeteer 或 Playwright；若必须用
html2canvas，只能走「前端触发 → 生成 blob → 上传 base64 到后端」这条路 - 常见报错如
TypeError: Cannot read property 'getContext' of null就是 canvas 元素没正确创建或未插入 DOM
Puppeteer 截图时如何控制分辨率和缩放，让文字清晰不糊？
默认截图是按设备像素比 1x 输出，高清屏上文字发虚。关键在 page.emulateViewport() 和 screenshot({ deviceScaleFactor: 2 }) 配合。
- 先调用
page.setViewport({ width: 1200, height: 800, deviceScaleFactor: 2 })，再截图，比只传deviceScaleFactor更可靠 - 避免用
fullPage: true截长图：高度太大时易 OOM，且缩放后字体边缘可能锯齿；建议分段截图再拼接 - 导出 PNG 优于 JPEG，尤其含文字时；JPEG 的压缩会模糊小字号和细线
生成的图片怎么自动适配不同尺寸的 HTML 内容？
不能靠 CSS 的 width: 100% 或 transform: scale() 去“缩放整个页面再截图”，这会导致像素失真、文字发虚。真实做法是动态计算视口尺寸。
立即学习“前端免费学习笔记（深入）”；
- 用
page.$eval('body', el => el.scrollHeight)获取实际高度，再设page.setViewport({ height: Math.min(10000, scrollHeight + 100) }) - 宽度固定为 1200px（适配主流设计稿），高度按内容算，避免留白或截断
- 如果 HTML 含响应式组件（如图表），截图前用
page.addStyleTag({ content: '@media screen { * { width: auto !important; } }' })临时禁用媒体查询干扰
最麻烦的其实是字体加载和第三方资源（比如 CDN 上的图标字体、远程 CSS）。本地没缓存时，networkidle0 可能误判加载完成——得单独 waitForFunction 检查 document.fonts.check('12px "xxx"') 或监听 document.fonts.onloadingdone。
