HTML5/JavaScript で作図アプリケーションを開発しています。すべての描画は Raphael または qooxdoo SVG を使用して SVG で行われます(まだ解決されていません)。描画領域はカスタム背景画像を使用する必要があります。画像が大きすぎてダウンロードできません (数メガバイト) 2560x1600 の Retina 解像度の場合)、そのため、タイルから構成し、ビットマップ効果を適用して、オンザフライで構成します.そのために、HTML5 canvasを使用します.その後、結果の背景画像に SVG からアクセスできるようにする必要があります.それを実現するには、キャンバスからデータ URIをエクスポートし、<image xlink:href="data:image/png;base64,..."/>SVG 内で使用します。
これは単純な例では機能しますが、本番環境でのメモリ使用量が少し気になります。画像が 12MB のメモリ (2560 * 1600 * 3 バイトのピクセル) を必要とする場合、追加のメモリはどれくらい使用されるでしょうか? base64 でエンコードされた PNG 圧縮表現をデータ URI として保存するために少なくとも数メガバイトが割り当てられ、さらに 12 メガバイトが SVG<image>要素のバッファに割り当てられると思います。
これを短絡して、冗長な画像のエンコードとデコードを回避する方法があるのだろうか?