Get height of width of remote image from url

Question

Thus, the warning gives undefined values ​​for width and height. I think that the values ​​w and h of the image from the img.onload calculation are not passed to the returned values, or they can return w and h until when onload calculates them:

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 show a warning about the correct width and height?

http://jsfiddle.net/YtqXk/

Answer 1

Get image size using jQuery

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

Get image size using JavaScript

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

Get image size using JavaScript (modern browsers, 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" );

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

Answer 2

Just pass the callback as an argument as follows:

 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

The variables w and h in the img.onload function img.onload not match the getMeta() function. One way to do this is to:

Violin : 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: Using async/await you can execute the getMeta function getMeta as a sequence and use it as follows (which is almost identical to the code in your question (I add the await keyword and change the end variable to img and change var to let keyword let ) You need to run getMeta using await only from the async function (run).

 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" />