The capture stopped at 3000 CSS px, so the reviewer never saw the bottom or footer. Now the full page height H is rendered at its normal width (1280). H <= 3000: one image, as before. Otherwise N = min(3, ceil(H/3000)) equal-height strips (each <= 3000 px) are laid out side by side, left to right (strip 1 = page top), with 24 px #808080 gutters, in one JPEG; H > 9000 shows the top 9000 px (cropped). Geometry is the pure stripGeometry() (unit-tested); JPEG quality steps 0.8 -> 0.5 before "too large" (3 MB cap, server limit 8 MB). CaptureResult gains strips/pageHeight; runSelfReview returns them and says when only the top of a long page was reviewed. Real eval pages: 2 strips, ~0.8-1.1 s, 150-270 KB in Chromium and Firefox; e2e checks strip order/alignment/gutters/cropping. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
22 lines
1.3 KiB
TypeScript
22 lines
1.3 KiB
TypeScript
// Bundled by scripts/e2e-capture-fidelity.mjs and run in real Firefox + Chromium.
|
|
import { captureHtml } from '../src/utils/self-review-capture';
|
|
import { sanitizeCaptureHtml } from '../src/utils/sanitize-capture-html';
|
|
|
|
(window as any).sanitizeCaptureHtml = sanitizeCaptureHtml;
|
|
/** Capture through the real path, then decode the JPEG and return RGB samples at the given points. */
|
|
(window as any).captureAndSample = async (html: string, points: Array<[number, number]>) => {
|
|
const t0 = performance.now();
|
|
const r = await captureHtml(html, { settleMs: 200, injectFontAwesome: false });
|
|
const ms = Math.round(performance.now() - t0);
|
|
if (!r.ok) return { ok: false, reason: r.reason };
|
|
const url = URL.createObjectURL(r.blob);
|
|
const img = new Image();
|
|
await new Promise<void>((res, rej) => { img.onload = () => res(); img.onerror = () => rej(new Error('decode')); img.src = url; });
|
|
const c = document.createElement('canvas');
|
|
c.width = img.naturalWidth; c.height = img.naturalHeight;
|
|
const ctx = c.getContext('2d')!;
|
|
ctx.drawImage(img, 0, 0);
|
|
URL.revokeObjectURL(url);
|
|
return { ok: true, w: c.width, h: c.height, strips: r.strips, cropped: r.cropped, pageHeight: r.pageHeight, bytes: r.blob.size, ms, samples: points.map(([x, y]) => Array.from(ctx.getImageData(x, y, 1, 1).data.slice(0, 3))) };
|
|
};
|