SuperAPI AI 工具集

stitched-full-page-capture

通用与其它

查看项目

更新于 10-16 06:46

技能介绍

用途:为懒加载、滚动动画、Framer、WebGL/canvas 或 reveal 较多的网页生成可靠的整页截图,或修复已有整页截图。

主要能力:通过逐屏稳定截图再纵向拼接,替代一次性浏览器 fullPage 截图;可从拼接图裁切分区图;可校验整页图与静帧、MP4、运动帧是否一致;可拒绝含空白/灰白条带、内容极少、缺失懒加载区块、内容列过窄或与滚动视频明显不符的候选图。

使用方式:打开真实页面 URL,而非缩略图、封面、remix 页或资源 URL;先从上到下滚动一次预热页面,再回到顶部;按视口大小或略重叠的步长向下滚动,每次停止后等待约 2 秒,截取稳定视口,最后纵向拼接。分区裁切应基于拼接图,而非原生 fullPage 截图。

脚本用法:node <skills-root>/stitched-full-page-capture/scripts/stitch_full_page_capture.mjs --manifest articles/YYYY-MM-DD-ui-inspiration-capture/manifest.json。脚本读取 items[].pageUrl、fullPageImage、sectionImages,用 Playwright Chromium 打开页面、预热、截取视口切片、拼接、重生成分区裁切,并更新 manifest.json 中的 fullPageCaptureMethod、viewport、step、segment count 和修正后的裁切坐标。可用选项:--item 4、--viewport 1440x1100、--step 950、--wait 2000、--quality 3。

验证:检查此前明显错误的页面;用 sips -g pixelWidth -g pixelHeight full-page/*.jpg 确认尺寸;确认整页图非大面积空白且包含下方内容;确认分区裁切坐标连续并结束于整页图高度;运行项目常规检查,如 git diff --check、node scripts/check-ui-inspiration-duplicates.mjs 及 ffprobe 校验 MP4。

限制:滚动视频只能证明页面在真实滚动时可渲染,不能替代整页静帧证据;原生 fullPage 截图可作对比候选,但除非与拼接图视觉一致,否则不作为事实来源。每日 UI 文章只提交修复后的文章资源与元数据。