長いスクリーンショットのキャンバス メモリ バジェット: デバイスによって制限が異なる理由

1,000 × 20,000 のスクリーンショットには 2,000 万ピクセルが含まれます。非圧縮 RGBA キャンバスでは、一時キャンバス、デコードされたソース イメージ、元に戻すスナップショット、PDF データ、およびブラウザーのオーバーヘッドがカウントされる前の、生のピクセル バッファーだけで約 8,000 万バイトになります。したがって、ディスク上のファイル サイズは、編集メモリの推定値としては不十分です。

スクリーンショット PDF バージョン 0.0.13 は、デバイス対応のピクセルと履歴バジェットを使用して、メモリの少ないシステムでのクラッシュを軽減しながら、より強力なデバイスでより多くの詳細と元に戻す能力を保持します。この記事では、これらの現在の値と、ユーザーがブラウザベースの画像ワークフローに適用できる推論について説明します。

圧縮されたメガバイトではなくピクセルがキャンバスのコストを左右します

PNG と JPEG は、反復または予測可能な視覚情報を圧縮します。 4 MB の PNG は、デコード後にさらに大きなピクセル バッファーに拡張できます。スクリーンショットの最初の計算は次のとおりです。

pixel area = width × height

バッファーの下限のおおよその推定値は次のとおりです。

RGBA bytes = width × height × 4

3,200 万ピクセルの場合、1 つの生バッファーは約 128 MB です。ブラウザ操作では、デコードされたイメージ、宛先キャンバス、トリミングされたキャンバス、プレビュー、および元に戻す状態を同時に一時的に保持する場合があります。実際のメモリ使用量は実装とブラウザに依存するため、この公式は約束ではなく計画のガイダンスです。

現在のスクリーンショット PDF のピクセル バジェット

エディターは、ブラウザーの navigator.deviceMemory ヒントが利用可能な場合は読み取り、それ以外の場合は保守的な中間値を想定します。 Canvas のピクセル制限は次のとおりです。

|報告されたデバイスのメモリ |キャンバスのピクセル予算 | | --- | ---: | | 2GB以下 | 20,000,000 | |最大 4 GB | 32,000,000 | |最大 8 GB | 48,000,000 | | 8GB以上 | 64,000,000 |

ブラウザの値は大まかであり、普遍的に利用できるわけではありません。これは、空き RAM の正確な測定値として解釈されるべきではありません。予算はベンチマーク スコアではなく、ガードレールです。

特大の画像を拡大縮小する方法

アップロードされた画像が選択したピクセル バジェットを超える場合、エディターは許容領域比の平方根を使用してスケールを計算します。

scale = √(pixel budget ÷ source pixel area)

幅と高さの両方にそのスケールが乗算されます。これにより、総面積を予算内に抑えながらアスペクト比を維持します。たとえば、両方の寸法を半分にすると、ピクセル領域が 4 分の 1 に減ります。

スケーリングにより、単一の画像が無制限の Canvas を割り当てることがなくなりますが、ソースの詳細も低下します。 PDF プレビューでは、インターフェイスの小さなテキストと細い線を 100% 検査する必要があります。読みにくくなった場合は、圧縮品質を繰り返し高めるのではなく、ソースをより狭いセクションまたはより短いセクションに分割します。

注釈履歴には独自のコストがかかります

スナップショットを元に戻すと、大きなキャンバスが複製される可能性があります。したがって、スクリーンショット PDF は履歴の深さを調整します。

• 2 GB を報告する非常に大きなキャンバスまたはデバイスでは、2 つのスナップショットが保持されます。
• 1,200 万ピクセルを超えるキャンバスまたは最大 4 GB のデバイスは 3 つを維持します。
• 一般的なミッドレンジのケースでは 4 つが維持されます。
• 少なくとも 8 GB を報告するデバイスは、最大 6 つを保持できます。

古いオブジェクト URL は、スナップショットが削除されると取り消されます。これにより、現在のドキュメントを変更することなく、保持されるブラウザのリソースが制限されます。ユーザーは、アンドゥ履歴を永続的なストレージとして扱うのではなく、重要な作業をエクスポートまたは保存する必要があります。

総面積よりも先に寸法が失敗する可能性がある

ブラウザとグラフィック バックエンドでは、総ピクセル領域に加えて、キャンバスの最大幅または高さが制限される場合があります。スクリーンショット PDF のステッチング パスは、領域予算の前に別の最大寸法を適用します。極端に幅が狭くて高い画像は、総面積が妥当であるように見えても、寸法の境界に達する可能性があります。

ブラウザのバージョン、GPU 構成、オペレーティング システム、および利用可能なメモリは、実際の動作に影響します。 MDN の Canvas チュートリアル では API について説明していますが、すべての環境に対して 1 つの普遍的な安全な最大値は提供されていません。

記憶プレッシャーの症状

• 画像はデコードされますが、プレビューは空白のままです。
• キャンバスを作成すると、使用できないコンテキストが返されます。
• ブラウザのタブがリロードされるか、応答しなくなる。
• スナップショットが大きいため、注釈が遅くなります。
• 元の画像がまだ表示されている間、PDF の生成は失敗します。
• ブラウザはメモリ不足または割り当てエラーを報告します。

これらの症状は、ファイルの破損を自動的に示すものではありません。より小さいコピーで再現し、関連のない重いタブを閉じて、ソースの寸法とデバイスのコンテキストを記録します。

非常に長い材料をより安全に取り扱う方法

1. 目に見える重複のある名前付きセクションをキャプチャします。
2. ビューポートを狭くして、無関係なサイドバーを除外しますが、テキストが読みやすい状態に保たれていることを確認します。
3. 構造またはメタデータを保持する場合は、ソース サービスの公式エクスポートを使用します。
4. 最大サイズのキャンバスで不必要に繰り返し編集を行わないようにします。
5. PDF が検査に合格するまで、元の画像を保管してください。
6. 中間ファイルを削除する前に、エクスポートされた PDF を 2 番目のビューアで開きます。

領収書、研究、またはサポート証拠の場合、セクション ファイルは 1 枚の巨大な画像よりも鮮明です。 part-01、part-02 などの決定的な名前を使用し、オーバーラップまたはセクションの境界を記録します。

再現可能な容量レポート

問題を報告するときは、ソースの幅と高さ、圧縮ファイルのサイズ、ブラウザと拡張機能のバージョン、報告されたデバイスのメモリ層（可能な場合）、試行された操作、および障害を再現する最小寸法を含めてください。合成画像が同じ割り当て動作を示す可能性がある場合は、プライベートのスクリーンショットを添付しないでください。

適応制限は、階層内のすべてのデバイスが同じように動作するという主張ではありません。これらは、詳細、安定性、および元に戻す能力の間の明確なトレードオフです。ピクセル計算を理解すると、ブラウザーが回復不能な制限に達する前に、ユーザーは小さくて鮮明なキャプチャを選択することができます。