获得从URL远程图像的宽度高度(Get width height of remote image f

因此警报给出了宽度和高度不确定的值。我想是不是被传递到值从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){   
    var 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

Answer 2:

只是传递一个回调像这样的说法：

 function getMeta(url, callback) { var img = new Image(); img.src = url; img.onload = function() { callback(this.width, this.height); } } getMeta( "http://snook.ca/files/mootools_83_snookca.png", function(width, height) { alert(width + 'px ' + height + 'px') } );

Answer 3:

的w和h在变量img.onload功能不与那些在相同的范围getMeta()函数。做到这一点的方法之一，如下所示：

小提琴 ： http://jsfiddle.net/ppanagi/28UES/2/

function getMeta(varA, varB) {
    if (typeof varB !== 'undefined') {
       alert(varA + ' width ' + varB + ' height');
    } else {
       var img = new Image();
       img.src = varA;
       img.onload = getMeta(this.width, this.height);
    }
}


getMeta("http://snook.ca/files/mootools_83_snookca.png");

Answer 4:

ES6：使用async/await ，你可以做以下getMeta依次样的方式功能，您可以按如下方式使用它（这是你的问题几乎相同的代码（我加await关键字和改变变量end到img ，变var到let关键字）。你需要运行getMeta的await只从async函数（运行）。

 function getMeta(url) { return new Promise((resolve, reject) => { let img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = url; }); } async function run() { let img = await getMeta("http://shijitht.files.wordpress.com/2010/08/github.png"); let w = img.width; let h = img.height; size.innerText = w+' width, '+h+' height'; size.appendChild(img); } run();