イメージを複数のピースに分割し、ユーザーの要求に応じて結合する方法

Question

（サイズ> 80 MB）という大きなイメージをWebページに読み込もうとしています。ユーザーは、一度に全体の画像を見る必要はなく、要求された部分だけを見る必要があります。

画像の寸法は、約10k x 10kです。

少し見渡しましたが、問題の合理的な解決策を見つけることができませんでした。

私は必要に応じていくつかの部分に画像を分割して（それぞれ9枚、3k×3k）、ユーザーの要求としてページにロードしたり、画像の次のセクションに移動したいと思います（例：ifユーザーは3k x 3kの境界を横切り、サーバーは必要に応じてサイドまたはボトムを送信します）。

イメージを分割する方法を見つけましたが、動的にそれを行い、それらを動的に縫う方法を見つけることができませんでした。

UPDATE

私はマイクロソフトディープズーム作曲を使用してみましたが、それはうまくいきませんでした。このような大きな画像サイズはサポートしていないと思います。 Microsoft PhotoSynthで同じイメージを試してみたところ、32MBまでのファイルしかサポートしていないというエラーメッセージが表示されました。 ディープ・ズーム・コンポーザーと写真Synthは同じファイル形式を使用しているので、同じファイルサイズの制約があると思います。

ファイル形式が正しくないであるが、ファイルが正しい形式（つまり、jpg）であるため、意味のあるエラーメッセージが表示されませんでした。それは私はあなたがより扱いやすい大きさにサイズをできないと仮定するつもりですし、あなたには、いくつかのグリッドでそれを示さなければならない表示するには、かなり大規模なイメージなので おかげ

Answer 1

あなたはMicrosoft Deep Zoom Composer

Answer 2

を使用することができます。ユーザーがビューを移動するときにブロックを個別に読み込むGoogleマップと同じアイデアを使用できます。

3k x 3kピクセルでさえほとんどのスクリーン解像度よりも大きいので、そのビューをどのように構成するかはあなた次第です。さらに小さなブロックが必要な場合があります。

私はあなたが必要とするものを行うためにオフハンドを知っていませんが、あなた自身をローリングすることはあまり難しくありません。グリッドにdivのグリッドを配置したコンテナdivを使用して、内側に配置されたそれぞれの背景画像ビットをロードするか、divの固定数をグリッドとしてレンダリングし、「ビューポート」の移動に必要な背景画像をロードできます。

希望は意味があります。

Answer 3

ファイルを別のファイル形式（たとえばbmp）に変換する必要があると思いますので、必要なピクセルに簡単に移動したり、それらのピクセルで新しい画像を作成して送信したり、保存したり、 。大きな問題は、新しい画像サイズになります。