如何在html5，canvas，javascript中將圖像縮放爲較大？

Question

我知道這聽起來可能是新手，但有很多答案只是不這樣做。

我有一個大小爲10,000像素高的.png圖像，並且想要將它縮放到30,000像素的高度。它可以是一個簡單的延伸到高度。

img = new Image(800, 30000); 
    img.src = path; 

但是當它出來時，它根本不會縮放圖像。它似乎將任何大於10,000像素的圖像擴展爲不可見像素。

另一個知道如何正確地做到這一點？

任何意見將不勝感激。謝謝。

Answer 1

這樣做會遇到問題。如果你想打印它，你想要將它縮放到這個尺寸的唯一原因。你需要打印它，那麼你將需要另一種解決方案。

現實 的事實是，你永遠只能看到儘可能多的顯示可呈現，所以創建圖像這個大是對資源的浪費和對瀏覽器的限制的戰鬥。

解決方案。 像平常一樣加載圖像，但不要將其添加到DOM。添加一個高度設置爲30000px的div元素，這將提供一個滾動條。然後創建一個高度和寬度設置爲window.innerWidth和window.innerHeight的畫布，並將CSS樣式{ position:fixed; top:0px; right:0px; }添加到該畫布，這將固定畫布的位置，但仍然通過背景div給出滾動條。

使用​​來調用您的函數，檢查更新的滾動位置，如果更改，則在畫布上呈現圖像的相應部分。

使用這種方法將使它看起來像是非常大的圖像，但你只能顯示可以看到的東西。如果你選擇你可以實現自己的滾動和一點花哨的數學，你可以使圖像像宇宙一樣大。想想谷歌地圖在最大縮放是什麼大小？這並不重要，因爲你只能看到它的一部分，所以他們只能渲染你看到的部分。