HTML5和JS：獲取圖像寬度

Question

編輯：
我解決我的問題，這樣做是坊間建議。 它被加載後當然需要引用圖像。通過使用'.onload'函數，我獲得了這個。然後，爲了引用圖像，我只需鍵入'this.width'，因爲我處於圖像的範圍內。編輯

END

我的畫布對象必須繪製各種圖像。這些圖像基本上是對象的視覺效果。 當試圖獲取圖像的寬度，我留下一個糟糕的零：

this.image = new Image(); 
// src is a parameter to the constructor which this code is run in. 
this.image.src = src; 
console.log(this.image.width); 

此代碼，我解釋說，返回零。

到目前爲止，我知道返回的寬度是基於圖像的初始構造函數 -
在這種情況下，'new Image（）;'部分。 因此，如果沒有任何內容作爲參數插入，則計爲零。

但是，如果我把如：

this.image = new Image(2, 2); 

..的返回值 'this.image.width'是2

我的問題是：我如何引用寬度，加載圖像之前不知道它？

Answer 1

您的圖片大小不知道，直到它完全加載並且由於它異步加載的尺寸是不是的.src

設置.onload回調後立即知道，把任何代碼需要的寬度，高度內部的回調：

// new-up an image 
this.image = new Image(); 

// set the callback for when the image is fully loaded 
this.image.onload=function(){ 

    // the image is loaded and it's actual size is now known 
    console.log(this.width); 

} 

// src is a parameter to the constructor which this code is run in. 
this.image.src = src;