从url获取远程图像的宽度高度

所以警报提供了未定义的宽度和高度值。 我认为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} } // "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; } 

使用上面的简单forms： getMeta( "http://example.com/img.jpg" );

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

Answer 2

只需传递一个callback，像这样的参数：

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

Answer 3

img.onload函数中的w和hvariables与getMeta()函数中的w和hvariables不在同一范围内。 其中一种方法如下：

小提琴 ： 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("files/mootools_83_snookca.png");