如何將圖像拆分為多個圖片並根據用戶要求將它們加入

Question

我正在嘗試將大圖像（大小> 80 MB）加載到網頁中。 用戶實際上並不需要一次查看整個圖像，而只需要查看請求的部分。

圖像的尺寸約為10k x 10k 。

我環顧四周，但找不到解決該問題的合理方法。

我想根據需要將圖像拆分成一定數量的片段（例如，前9個片段，每個3k x 3k），然后根據用戶請求將其加載到頁面中，或者移至圖像的下一部分（例如，如果用戶跨過3k x 3k邊界，服務器將根據需要發送側面或底部一塊）。

我確實找到了分割圖像的方法，但是找不到動態地進行分割並將其動態縫合的方法。

更新

我嘗試使用Microsoft Deep Zoom Composer，但是沒有用。 我認為它不支持這么大的圖像尺寸。 當我在Microsoft PhotoSynth中嘗試相同的圖像並收到一條錯誤消息，它僅支持最大32MB的文件時，我得出了這個結論。 Deep Zoom Composer和Photo Synth使用相同的文件格式，因此我認為它們可能具有相同的文件大小限制。

Deep zoom Composer沒有產生有意義的錯誤消息，因為錯誤消息是， 文件格式不正確 ，但是文件格式正確（例如jpg）。 謝謝

Answer 1

您可以使用Microsoft Deep Zoom Composer

Answer 2

由於要顯示的是相當大的圖像，因此我將假定您無法將其調整為更易於管理的尺寸，而必須將其顯示在某些網格中。 您可以使用與Google Maps相同的想法，即當用戶在視圖中移動時分別加載塊。

由於3k x 3k像素甚至比大多數屏幕分辨率都要大，因此如何構造視圖將取決於您。 您可能需要更小的塊。

我不知道可以立即使用任何組件來完成您需要的操作，但是滾動自己的組件應該不會太困難。 您可以使用一些容器div其中的網格div排列在內部，當每個div進入視圖時，您將加載背景圖像位，或者可以將固定數量的div作為網格渲染，並在“視口”移動時加載必要的背景圖像。

希望有道理。

Answer 3

我認為您應該將其轉換為另一種文件格式，例如bmp，這樣您就可以輕松地在文件中導航至所需的像素，使用這些像素組成新圖像並將其發送，或者保存並重新顯示。 最大的問題是新的圖像大小。