整页截图

整页截图会把网页可滚动的全部高度截取到一张图像中，而不只是浏览器窗口中可见的部分。一个较长的落地页可能生成高达数千像素的图像。

常见的方法有两种。浏览器可以一次渲染整个文档高度，DevTools 和自动化库都支持这种方式。另一种是由工具每次滚动一个视口，再把各部分拼接起来。

两种方法都会遇到相同的页面行为：吸顶标题栏、滚动到可见区域才加载的图片、无限滚动，以及在帧与帧之间变化的动画。

整页截图与视口截图、滚动截图

类型	高度	生成方式
视口	一屏	截取当前可见的内容
整页	整个文档	渲染或拼接完整页面
滚动	整个滚动区域	滚动任意窗口或面板并拼接

整页截图专用于网页。滚动截图还可以覆盖应用面板、聊天记录和文档。

整页截图的使用场景

• 需要查看完整布局的设计评审和交付。
• 在改版前或为留档而存档页面。
• 检查首屏以下较远位置布局问题的 QA。
• 作品集和案例研究图片。

如何生成整页截图

在 Temposhot 的 Website Capture 中，将 Area 设为 Full page。选择一个 Wait 条件（Load、DOM content loaded 或 Network idle），如果内容加载较晚，再添加 0-60 秒的延迟。输出格式可以是 JPEG、PNG 或 WebP。

如果只需截取单个页面，可以在 Chrome 116+ 中使用 Temposhot Full Page Screenshot 扩展。它会滚动当前页面，在本地以 Retina 分辨率拼接各个视口，并下载一个 PNG 文件。

整页截图的常见错误

• 在懒加载图片出现之前截取，留下空白区域。
• 拼接图像中重复出现吸顶标题栏或聊天按钮。
• 图像过高，被部分查看器和上传表单拒绝。
• 对包含小字的长页面使用 JPEG。

需要反复截取相同的截图？

使用网站截图自动化，为整个 URL 列表截取整页截图。

常见问题

为什么整页截图的一部分是空白的？

页面很可能在滚动时才加载图片。可以使用 Network idle 或更长的延迟。

可以把很高的截图拆分成多页吗？

可以。Split Image 能把一张很高的图像切成多个部分。

参考资料

• Chrome DevTools 文档
• Screenshot（维基百科）

相关资源

• Website Capture 选项：区域、等待和格式设置。
• Stitch Screenshots：把多张截图拼接成一张图像。