HTML5 - 畫布 - 優化大圖像

Question

我需要建立一個HTML5canvas其中包含一個非常大的圖像，可能高達10-15MB。我的第一個想法是將圖像分成幾個塊，當水平移動通過畫布時將加載這些塊。

對這個想法有什麼想法？這是一個好的嗎？也許我錯過了一些已經實現的優化功能？

Answer 1

現在你已經發現了，這種平鋪是大多數服務大圖像（如谷歌地圖）的應用程序的工作原理。

不幸的是，這裏沒有任何其他聰明的優化。

Answer 2

它可能是一個好主意，但它取決於您的應用程序。下載圖片所需的時間可以被認爲是很小的，而且往往是這樣，但它確實是不可預測的。因此，根據您的應用程序是靜態應用程序（Google地圖）還是動態應用程序（遊戲），延遲加載可能不是一個好主意。

如果使用可以等待，您可以安全地將您的圖片分割成不同的圖塊並按需加載。

如果是一款遊戲，那麼最好在它開始前預加載所有內容 - 至少預加載一個關卡，但我不知道它是否包含關卡，我們甚至不知道它是否是遊戲： ）

Answer 3

如果不是需要立即響應的東西，你也可以做的是使用服務器腳本來提取你需要的任何一幅較大的圖像，所以不要依賴預先定義的圖塊，而是可以創建圖像，設置它的源

「imageSliceScript.php X =任何& Y =什麼」

然後繪製到畫布上，或者只是把它作爲一個圖像。這樣，您只需獲取當前所需圖像的一部分，而不必處理諸如視口在邊緣處的多個圖塊之類的問題。