JS擷取圖片高度寬度的方法分享，js擷取圖片寬度

JS擷取圖片高度寬度的方法分享，js擷取圖片寬度

一般擷取圖片高度寬度的寫法：

複製代碼 代碼如下:
var img = new Image();
img.src = imgsrc;
var imgWH = CalcImgTiple(img.width, img.height);

但chrome中測試 無法擷取到。img.width, img.height都為0

原因:當圖片不是本地圖片,而是網狀圖片
onload 在成功地裝載了映像時調用的事件處理常式。

在做web開發，其中有一個需求：利用Javascript擷取要載入的圖片的尺寸，所以很自然的，想到了img的onload方法，在firefox下開發完成後，到IE下調試，發現img的onload事件很多情況下都不被調用。

最初的代碼如下：

複製代碼 代碼如下:
var img = new Image;
img.src = "test.gif";
img.onload = function(){
alert ( img.width );
};

這段代碼看著沒什麼問題，但是為什麼onload沒有被IE調用呢？因為IE會緩衝圖片，第2次載入的圖片，不是從伺服器上傳過來的，而是從緩衝區裡載入的。是不是從緩衝區裡載入的圖片就不觸發onload事件呢？我於是我測試了以下代碼，成功了～

複製代碼 代碼如下:
var img = new Image;
img.onload = function(){
alert ( img.width );     };
img.src = "test.gif";

把onload寫到前面去，先告訴瀏覽器如何處理這張圖片，再指定這張圖片的源，這樣就正常了。所以，不是IE沒有觸發onload事件，而是因為載入緩衝區的速度太快，以至於沒有運行到img.onload的時候，onload事件已經觸發了。這讓想到了Ajax，在寫xmlhttp的時候，都是先指定onstatechange的回呼函數，然後再send資料的，道理是一樣的

以上所述就是本文的全部內容了，希望大家能夠喜歡。