javascript - 无法从img.onload返回值[重复](Unable to return value from img.onload [duplicate])

Question

This question already has an answer here:

(这个问题已经在这里有了答案：)

• How do I return the response from an asynchronous call?

  (如何从异步调用返回响应？)

  36 answers

  (36个答案)

trying to get dimenstions (eg 600x300) from an image using javascript.

(尝试使用javascript从图像中获取尺寸（例如600x300）。)

I am not sure how to return the data because it's not working.

(我不确定如何返回数据，因为它无法正常工作。)

Do I need a callback, and how ?

(我需要回调，如何？)

<script>
function getMeta(url){   
    var img = new Image();
    var res = img.onload = function(){
        var ret = this.width+'x'+ this.height;
        alert(ret);
        return ret;
    };
    img.src = url;
    return res;
}
var meta = getMeta('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg');
alert(meta);
</script>

  ask by Mike Q translate from so

Answer 1

getMeta is finished before onload function.

(getMeta在onload函数之前完成。)

You need to use a Promise or a callback.

(您需要使用Promise或回调。)

Example with callback below:

(下面的回调示例：)

 function getMeta(url, cb){ var img = new Image(); img.onload = function(){ var ret = this.width+'x'+ this.height; console.log(ret); cb(ret); }; img.src = url; } getMeta('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg', function(meta){ console.log('got meta', meta); });