HTML5 - 拖放JPG並接收其寬度

Question

我想在將JPG拖入瀏覽器窗口後收到JPG的寬度。奇怪的是，有時它完美地工作，有時零寬度返回。

fiddle

document.body.addEventListener('drop', function (e) 
{ 
    e.stopPropagation(); 
    e.preventDefault(); 

    file = e.dataTransfer.files[0]; 

    reader.readAsDataURL(file); 
    reader.onloadend = function() 
    { 
     var source = this.result; 
     var currentImg = new Image(); 
     currentImg.src = source;  

     var someDiv = document.createElement("div"); 
     someDiv.innerHTML = '<li>'+currentImg.width+'</li>'; 

     document.getElementById("logs").appendChild(someDiv); 
    } 
}); 

Answer 1

這是因爲你可能被加載圖像之前獲得的寬度。 把這樣的代碼，你工作正常。

... 
var currentImg = new Image(); 
currentImg.onload = function() { 
    var someDiv = document.createElement("div"); 
    someDiv.innerHTML = '<li>'+currentImg.width+'</li>'; 
    document.getElementById("logs").appendChild(someDiv); 
} 
currentImg.src = source; 
... 

把onload事件設置SORCE因爲onload事件是一個回調函數之前。