如何在html5，canvas，javascript中將圖像縮放到更大？

Question

我知道這聽起來像是新手，但是有很多答案是不可行的。

我有一個.png圖像，高度為10,000像素，並希望將其縮放到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; } { position:fixed; top:0px; right:0px; } { position:fixed; top:0px; right:0px; }可以固定畫布的位置，但仍通過背景div給出滾動條。

使用requestAnimationFrame調用您的函數，該函數檢查更新的滾動位置，如果更改，則在畫布上渲染圖像的適當部分。

使用此方法將使其看起來非常大，但是您只能顯示可見的圖像。 如果選擇，則可以實現自己的滾動，並通過一些簡單的數學運算就可以使圖像與Universe一樣大。 想想最大縮放的Google地圖的大小是多少？ 沒關系，因為您只能看到其中的一部分，因此它們只能渲染您可以看到的部分。