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

Get width height of remote image from url

提问by Wonka

So the alert gives undefined values for the width and height. I think the w and h values of the image from the img.onload calculation is not being passed to the values to return, or it may be returning w and h beforethe onload calculates them:

所以警报给出了宽度和高度的未定义值。我认为来自 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');

How can I have the alert show the correct width and height?

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

http://jsfiddle.net/YtqXk/

http://jsfiddle.net/YtqXk/

回答by Roko C. Buljan

Get image size with jQuery

使用 jQuery 获取图像大小

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

Get image size with JavaScript

使用 JavaScript 获取图像大小

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

Get image size with JavaScript (modern browsers, IE9+ )

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

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

Use the above simply as: getMeta( "http://example.com/img.jpg" );

将上述内容简单地用作： getMeta( "http://example.com/img.jpg" );

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

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

回答by feychu

Just pass a callback as argument like this:

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

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') }
);

回答by Panagiotis Panagi

The wand hvariables in img.onloadfunction are not in the same scope with those in the getMeta()function. One way to do it, is as follows:

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

Fiddle: http://jsfiddle.net/ppanagi/28UES/2/

小提琴：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");

回答by Kamil Kie?czewski

ES6:Using async/awaityou can do below getMetafunction in sequence-like way and you can use it as follows (which is almost identical to code in your question (I add awaitkeyword and change variable endto img, and change varto letkeyword). You need to run getMetaby awaitonly from asyncfunction (run).

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

<div id="size" />

回答by almaceleste

Get image size with jQuery
(depending on which formatting method is more suitable for your preferences):

使用 jQuery 获取图像大小
（取决于哪种格式化方法更适合您的偏好）：

function getMeta(url){
    $('<img/>',{
        src: url,
        on: {
            load: (e) => {
                console.log('image size:', $(e.target).width(), $(e.target).height());
            },
        }
    });
}

or

或者

function getMeta(url){
    $('<img/>',{
        src: url,
    }).on({
        load: (e) => {
            console.log('image size:', $(e.target).width(), $(e.target).height());
        },
    });
}