javascript - 从 url 获取远程图像的宽高

Question

所以警告给出了未定义的宽度和高度值。我认为来自 img.onload 计算的图像的 w 和 h 值没有传递给要返回的值，或者它可能在 onload 计算它们之前 返回 w 和 h:

function getMeta(url){
 var w; var h;
 var img=new Image;
 img.src=url;
 img.onload=function(){w=this.width; h=this.height;};
 return {w:w,h:h}    
}

// "http://snook.ca/files/mootools_83_snookca.png" //1024x678
// "http://shijitht.files.wordpress.com/2010/08/github.png" //128x128

var end = getMeta("http://shijitht.files.wordpress.com/2010/08/github.png");
var w = end.w;
var h = end.h;
alert(w+'width'+h+'height');

如何让警报显示正确的宽度和高度？

http://jsfiddle.net/YtqXk/

Answer 1

用jQuery获取图片大小

function getMeta(url) {
    $("<img/>",{
        load: function() {
            alert( this.width +" "+ this.height );
        },
        src: url
    });
}

使用 JavaScript 获取图片大小

function getMeta(url) {   
    var img = new Image();
    img.onload = function() {
        alert( this.width +" "+ this.height );
    };
    img.src = url;
}

使用 JavaScript (现代浏览器，IE9+)获取图像大小

function getMeta(url){   
    const img = new Image();
    img.addEventListener("load", function() {
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

像这样使用:getMeta( "http://example.com/img.jpg");

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement