javascript - HTML5 - 拖放 JPG 并接收其宽度

Question

我想在将 JPG 拖入浏览器窗口后接收它的宽度。奇怪的是，有时它工作得很好，有时返回的宽度为零。

小提琴

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 放在设置源之前，因为 onload 是一个回调函数。