fix: capture viewport-only screenshots for readable resolution

captureBeyondViewport was capturing the entire page in one giant image
(2804x20746), making text unreadable. Now captures per-viewport with
80% overlap, producing ~2400x1992 screenshots that vision can read.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ywkj 2026-03-30 12:23:00 +08:00
parent a780041840
commit 92a3e2eba3
1 changed files with 6 additions and 4 deletions

View File

@ -70,7 +70,7 @@ class CdpSession {
async captureScreenshot(format: string = 'png'): Promise<Buffer> {
const res = await this.send('Page.captureScreenshot', {
format,
captureBeyondViewport: true,
captureBeyondViewport: false,
});
return Buffer.from(res.data, 'base64');
}
@ -99,19 +99,21 @@ async function scrollAndCapture(
) || 0;
const viewportHeight: number = await cdp.evaluate('window.innerHeight') || 900;
// Scroll through the page and capture screenshots
// Scroll through the page and capture viewport-sized screenshots
// Use 80% step to overlap slightly and avoid missing content at boundaries
const step = Math.floor(viewportHeight * 0.8);
let scrollY = 0;
let idx = 1;
while (scrollY < pageHeight) {
await cdp.evaluate(`window.scrollTo(0, ${scrollY})`);
await new Promise(r => setTimeout(r, 500)); // wait for render
await new Promise(r => setTimeout(r, 800)); // wait for lazy-load render
const buf = await cdp.captureScreenshot('png');
const filePath = path.join(outputDir, `page_${String(idx).padStart(3, '0')}.png`);
fs.writeFileSync(filePath, buf);
saved.push(filePath);
scrollY += viewportHeight;
scrollY += step;
idx++;
}