最初の画面だけでなく、ページ全体を。

長いキャプチャを台無しにする3つの要因

遅延読み込み。長いページの大部分は、キャプチャが実行される時点でビューポートに入ったことがないため、フォールド以下の画像はグレーのボックスかぼかしのプレースホルダーのままです。その対策として、キャプチャ前に必ずページを上から下まで一度なぞってから待機します。

アニメーション。スクロールでフェードインやスライドインする要素は、トランジションの途中で捕捉されてしまい、カルーセルはスライドの途中で捕捉されてしまいます。キャプチャ前にアニメーションとトランジションは一時停止され、コンポーネントは静止した状態になります。

同意ウォール。モーダルとその背景がすべての上に重なり、多くの場合スクロールもロックしてしまうため、キャプチャそのものが破綻します。主要な同意プラットフォームと汎用パターンは非表示にされ、スクロールロックも解除されます。

ビューポートキャプチャが欲しいとき

フルページがデフォルトなのは、通常それが求められているものだからです。オフにすれば、指定したビューポートそのままの画像が得られます。これはサムネイル、ソーシャルプレビュー、統一されたアスペクト比が網羅性より重要になるグリッドに適した選択です。

密度とサイズ

最大3倍までのデバイスピクセル密度により、印刷や高解像度ディスプレイ向けのRetina出力が得られます。料金は1倍のキャプチャと同じです。単位はレンダリングされたページであり、メガピクセルではありません。

{"url":"https://stripe.com",
 "full_page": true,
 "width": 1440,
 "device_scale_factor": 2}