JavaScript Get image dimensions

Question

I only have a URL to an image  I need to determine the height and width of this image using only JavaScript  The image cannot be visible to the user on the page  How can I get its dimensions

User · Answer

Similar question asked and answered using JQuery here:

Get width height of remote image from url

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

getMeta("http://page.com/img.jpg");

User · Answer

This uses the function and waits for it to complete   http   jsfiddle net SN2t6 118   function getMeta url       var r     Deferred           lt img  gt    attr  src   url  load function         var s    w this width  h this height        r resolve s          return r     getMeta  http   www google hr images srpr logo3w png   done function test       alert test w         test h

User · Answer

if you have image file from your input form  you can use like this  let images   new Image    images onload        gt     console log  Image Size   images width  images height    images onerror        gt  result true    let fileReader   new FileReader    fileReader onload        gt  images src   fileReader result  fileReader onerror        gt  result false   if  fileTarget       fileReader readAsDataURL fileTarget

User · Answer

var img   new Image     img onload   function      var height   img height    var width   img width        code here to use the dimensions    img src   url

User · 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

naturalWidth and naturalHeight  var img   document createElement  img    img onload   function  event        console log  natural    img naturalWidth  img naturalHeight       console log  width height    img width  img height       console log  offsetW offsetH    img offsetWidth  img offsetHeight     img src    image jpg   document body appendChild img       css for tests img   width 50  height 50

User · Answer

Make a new Image  var img   new Image      Set the src  img src   your src   Get the width and the height    img width   img height

User · Answer

Following code add image attribute height and width to each image on the page    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN  http   www w3 org TR html4 strict dtd  gt   lt html gt   lt head gt   lt title gt Untitled lt  title gt   lt script type  text javascript  gt  function addImgAttributes         for  i 0  i  lt  document images length  i                   width   document images i  width          height   document images i  height          window document images i  setAttribute  width  width           window document images i  setAttribute  height  height             lt  script gt   lt  head gt   lt body onload  addImgAttributes     gt   lt img src  2 01 jpg   gt   lt img src  2 01 jpg   gt   lt  body gt   lt  html gt

[javascript] JavaScript: Get image dimensions

Examples related to javascript

Examples related to html

Examples related to image