<img>寬度在重負載下返回0

以下handleFiles方法正在從拖放和文件輸入中傳遞文件。在獲得給定文件的數據url後，它將它傳遞給processImage函數。該功能創建一個新的圖像並設置該圖像的src和文件。然後根據傳入圖像的寬度採取不同的操作並將圖像插入到dom中。不過，我注意到，當放入一堆圖像時，imageWidth將被設置爲0.我已經確認image.src已正確設置，並且本身放置相同的圖像效果不錯。我也確認，如果我刪除寬度計算，圖像在頁面上顯示正確。當我進入調試器時，我可以確認在imageWidth被設置爲0後立即返回一個正確的值。起初我認爲這可能是Chrome中的一個線程問題，但是當我看到它發生在FireFox中時，我也感到驚慌。我無法確定某個特定的閾值，但是放在瀏覽器上的負載越多，正確獲取寬度的可能性就越小。<img>寬度在重負載下返回0

我在FireFox 16.0.2和Chrome 23.0.1271.95中看到了這個問題。

function handleFiles(files) { 

    for (var i = 0; i < files.length; i++) { 
    var file = files[i]; 

    if(!isImage(file)) { 
     continue; 
    } 

    var reader = new FileReader(); 

    reader.onloadend = function(e) { 
     var dataURL = e.target.result; 
     processImage(file, dataURL); 
    } 

    reader.readAsDataURL(file); 
    } 
} 

function processImage(file, dataURL) { 
    var i = new Image(); 
    i.src = dataURL; 
    i.file = file; 

    //console.log(i); 
    var maxWidth = 600; 
    var imageWidth = i.width; 

    ...... 
}

來源

2012-11-29 bmck

寬度（和高度）可能爲0，因爲它尚未加載。

嘗試添加load事件，像這樣：

function processImage(file, dataURL) { 
    var i = new Image(); 


    i.addEventListener("load", function() { 
    var maxWidth = 600; 
    var imageWidth = i.width; 

    ...... 

    }); 

    i.src = dataURL; 
    i.file = file; 

}

來源

2012-11-29 23:03:45 carlcalderon

優秀。感謝你們倆。 – bmck

如同所有的圖像，他們可能需要時間來加載之前，他們會告訴你他們的寬度：

var i = new Image(); 
    i.onload = function() { 
    //console.log(i); 
    var maxWidth = 600; 
    var imageWidth = this.width; 
    } 
    i.src = dataURL; 
    i.file = file;

來源

2012-11-29 23:05:26

<img>寬度在重負載下返回0

回答

相關問題