Get width height of remote image from url

Question

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 before the 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 have the alert show the correct width and height    http   jsfiddle net YtqXk

User · Accepted Answer

Get image size with jQuery  function getMeta url           lt img  gt             load   function                alert this width     this height                      src    url             Get image size with 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     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

User · Answer

Get image size with jQuery  depending on which formatting method is more suitable for your preferences    function getMeta url           lt img  gt             src  url          on                load   e    gt                    console log  image size      e target  width      e target  height                                          or  function getMeta url           lt img  gt             src  url         on           load   e    gt                console log  image size      e target  width      e target  height

User · Answer

ES6  Using async await you can do below getMeta function in sequence-like way and you can use it as follows  which is almost identical to code in your question  I add await keyword and change variable end to img  and change var to let keyword   You need to run getMeta by await only from async function  run    x000D   x000D  function getMeta url        return new Promise  resolve  reject    gt            let img   new Image            img onload        gt  resolve img           img onerror        gt  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    width   w px  height   h px     size appendChild img      run    x000D   lt div id  size    gt  x000D   x000D   x000D

User · Answer

The w and h variables in img onload function are not in the same scope with those in the getMeta   function  One way to do it  is as follows   Fiddle  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

User · Answer

Just pass a callback as argument like this    x000D   x000D  function getMeta url  callback    x000D      var img   new Image    x000D      img src   url  x000D      img onload   function     callback this width  this height     x000D    x000D  getMeta  x000D     http   snook ca files mootools 83 snookca png   x000D    function width  height    alert width    px     height    px     x000D     x000D   x000D   x000D

[javascript] Get width height of remote image from url

Get image size with jQuery

Get image size with JavaScript

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

Examples related to javascript

Examples related to image

Examples related to height

Examples related to width