Javascript 从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}    
}

// "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');

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

使用jQuery获取图像大小 使用JavaScript获取图像大小（现代浏览器，IE9+） 简单地使用上面的代码：

getMeta（“http://example.com/img.jpg" );

函数
img.onload
中的
w
和
h
变量与
getMeta（）函数中的变量不在同一范围内。一种方法如下：

小提琴：

只需将回调作为参数传递，如下所示：


函数getMeta（url，回调）{
var img=新图像（）；
img.src=url；
img.onload=function（）{callback（this.width，this.height）；}
}
格梅塔(
"http://snook.ca/files/mootools_83_snookca.png",
函数（宽度、高度）{alert（宽度+px'+高度+px'）}
);ES6:使用
async/await
您可以按顺序执行下面的
getMeta
函数，您可以按如下方式使用它（这与您问题中的代码几乎相同（我添加
await
关键字，将变量
end
更改为
img
，将
var
更改为
let
关键字）。您只需通过
await
函数（run）运行
getMeta
）


函数getMeta（url）{
返回新承诺（（解决、拒绝）=>{
设img=新图像（）；
img.onload=（）=>resolve（img）；
img.onerror=（）=>拒绝（）；
img.src=url；
});
}
异步函数run（）{
让img=wait getMeta（“http://shijitht.files.wordpress.com/2010/08/github.png");
设w=img.宽度；
设h=img.高度；
size.innerText=`width=${w}px，height=${h}px`；
子对象的大小（img）；
}
运行（）；
使用jQuery获取图像大小

（取决于哪种格式更适合您的首选项）：

函数getMeta（url）{
$(' {
log（'image size:'，$（e.target）.width（），$（e.target）.height（））；
},
}
});
}

或

函数getMeta（url）{ $(' { log（'image size:'，$（e.target）.width（），$（e.target）.height（））； }, }); }

---

它不起作用的原因是，当

返回
宽度和高度值时，它们还未知。您需要在
onload
回调中处理结果。您可能应该将回调函数作为
getMeta
函数的第二个参数。谢谢，这符合预期，获取信息的时间太长。如果映像尚未存储在浏览器的缓存中，则此解决方案将无法工作。您必须在getMeta中接受一个回调函数，该函数将在onload事件激发时调用（）@Zack-hmmm..width和height没有被返回，我怎样才能让它们返回到函数外使用？@Wonka更新了我的答案。一旦定义了回调函数，你就可以传递变量并在回调函数中操作它们。@Zack我看到了更新，它解决了缓存问题。但是你能演示如何访问吗s函数外部的宽度和高度。我需要函数返回自身外部的值。既然没有返回宽度和高度，我怎么能让它们返回到函数外部使用？@Wonka不能不调用
函数内部的某个函数。load
函数---或setInterval，原因是在读取和执行代码时剪切后，图像仍在加载：Interval将进行检查，直到图像加载并在本演示中自行清除：@Wonka查看此处，以便在图像加载后立即调用函数：请注意，对于中的SVG图像，宽度和高度返回为
0
IE11@RokoC.Buljan，jQuery部分的代码抛出错误：
uncaughtypeError:url.indexOf不是一个函数
。我认为其中有一个小错误，即
img
属性和侦听器位于同一个对象中。请参阅，谢谢，这对我帮助很大。请注意，IE11中SVG图像的宽度和高度返回为
0
function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

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

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

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");