HTML5 - 檢測圖像大小，調整大小畫布

Question

我最近製作並託管了Catifier.com。

它工作得很好，除了我有一個保存錯誤，我必須制定出來，並且當它們設置爲背景時它會拉伸圖像。

肖像圖像看起來很可怕。

是否可以檢測用戶在盒子中粘貼的圖像的寬度和高度，然後相應調整畫布的大小？

Answer 1

您必須將圖片加載到DOM元素中以瞭解其大小。

所以basicly，當你想這樣做，這裏的步驟：

• 添加您的圖片在一個看不見的DOM元素。
• 當onload事件發生時，您將能夠獲得圖片寬度和高度。
• 然後根據這兩個變量創建畫布。

所有可以在很少的javascript行中完成。

Answer 2

只是要寫出一個非常通用的，可能不完全功能的方式來做到這一點真正快速只是爲了給更多的想法。

var img = document.getElementByTagName('img'); 
for (var i = 0; i < img.length; i++) { 
    var width = img[i].width, 
     height = img[i].height; 

    // do some stuff with the img[i] width and height here if you like. for each image on the page... 
} 

不是你如何最終實際做到這一點，但它只是做，img.width或高度一樣簡單。如果這有助於更多。