ページ全体をキャプチャする

Pinar はビューポートのフレームを計画し、ドキュメントをスクロールし、繰り返される sticky または fixed 要素を一時的に抑え、デバイスピクセル比で描画し、あとでページを元に戻します。

遅延読み込み、アニメーションするレイアウト、クロスオリジンフレーム、スクロール中に変わるページは、隙間や未解決領域を生むことがあります。ページが落ち着いてから再試行するか、該当箇所を別にキャプチャしてください。

Pinar はピン境界の和集合に余白を足してスクロール位置を計画し、タブのスクリーンショット API でビューポート高の PNG タイルを順に撮ります。後続タイルはページが描画できるよう少し待ち、合成キャンバスは最初のタイル幅と CSS ビューポートから推定したデバイスピクセル比を使います。

最初のタイルの前に、sticky と fixed のノードは各フレームで繰り返されないよう書き換えられます。合成が失敗しても、元のインラインスタイルとスクロール位置は復元されます。ピンとマスクの座標は、画像を切り出す前にキャプチャ原点へずらされます。

• fixed ノードは測定したボックスで絶対配置になり、変換は解除されるため、スクリーンショットで二重にずれません。
• sticky ノードは、キャプチャパスのあいだ相対配置になります。
• タイルのスクロールは instant の scroll-behavior を使い、フレーム間でドキュメントがアニメーションしません。