捕获整页
在 Pinar 控制滚动、缩放和重复固定内容的同时,生成一张长截图。
3 分钟本指南内容
1
拼接如何工作
Pinar 会规划视口帧、滚动文档、临时抑制重复的粘性或固定元素、按设备像素比渲染,然后恢复页面。
2
结果何时会不同
懒加载内容、动画布局、跨源 frame,以及滚动时发生变化的页面,可能产生空隙或未解析区域。让页面稳定后再试,或单独捕获受影响的区域。
3
视口图块与布局恢复
Pinar 根据图钉边界并集加上内边距规划滚动位置,然后通过标签页截图 API 捕获每个视口高度的 PNG 图块。后续图块会短暂等待以便页面绘制,合成画布使用从第一块宽度与 CSS 视口推断出的设备像素比。
在第一块之前,粘性和固定节点会被改写,以免在每一帧重复出现。即使合成失败,原始内联样式和滚动位置也会恢复。裁剪图像前,图钉和遮罩坐标会平移到捕获原点。
- 固定节点会变成按测量框绝对定位,并清除变换,以免截图把它们偏移两次。
- 在捕获过程中,粘性节点会变成相对定位。
- 图块滚动使用即时 scroll-behavior,因此文档不会在帧之间做动画。
还需要更多背景?查看该分类全部内容