How to get image size height width using JavaScript

Question

Are there any JavaScript or jQuery APIs or methods to get the dimensions of an image on the page

User · Answer

Let s combine everything we learned here into one simple function  imageDimensions     It uses promises   x000D   x000D     helper to get dimensions of an image const imageDimensions   file   gt       new Promise  resolve  reject    gt            const img   new Image               the following handler will fire after the successful loading of the image         img onload        gt                const   naturalWidth  width  naturalHeight  height     img             resolve   width  height                          and this handler will fire if there was an error with the image  like if it s not really an image or a corrupted one          img onerror        gt                reject  There was some problem with the image                           img src   URL createObjectURL file         here s how to use the helper const getInfo   async    target    files        gt        const  file    files       try           const dimensions   await imageDimensions file          console info dimensions        catch error            console error error          x000D   lt script src  https   cdnjs cloudflare com ajax libs babel-standalone 7 0 0-beta 3 babel min js  gt  lt  script gt   Select an image   lt input   type  file    onchange  getInfo event     gt   lt br   gt   lt small gt It works offline  lt  small gt  x000D   x000D   x000D

User · Answer

You can only really do this using a callback of the load event as the size of the image is not known until it has actually finished loading  Something like the code below     var imgTesting   new Image     function CreateDelegate contextObject  delegateMethod        return function                 return delegateMethod apply contextObject  arguments            function imgTesting onload         alert this width     by     this height       imgTesting onload   CreateDelegate imgTesting  imgTesting onload   imgTesting src    yourimage jpg

User · Answer

it is important to remove the browser interpreted setting from the parent div  So if you want the real image width and height you can just use       right-sidebar   find  img   each function          this  removeAttr  width          this  removeAttr  height          this  imageResize          This is one TYPO3 Project example from me where I need the real properties of the image to scale it with the right relation

User · Answer

clientWidth and clientHeight are DOM properties that show the current in-browser size of the inner dimensions of a DOM element  excluding margin and border   So in the case of an IMG element  this will get the actual dimensions of the visible image   var img   document getElementById  imageid       or however you get a handle to the IMG var width   img clientWidth  var height   img clientHeight

User · Answer

Using JQuery you do this   var imgWidth       imgIDWhatever   width

User · Answer

var img   document getElementById  img id    alert  img height            img  width            img  naturalHeight            img  clientHeight            img offsetHeight            img scrollHeight            img clientWidth            img offsetWidth            img scrollWidth     But all invalid in Baidu browser  360 browser

User · Answer

You can also use   var image document getElementById  imageID    var width image offsetWidth  var height image offsetHeight

User · Answer

Nicky De Maeyer asked after a background picture  I simply get it from the css and replace the  url      var div       my-bg-div    var url   div css  background-image   replace   url                    1    var img   new Image    img src   url  console log  img    img width    x    img height      zero  image not yet loaded console log  div    div width      x    div height     img onload   function       console log  img    img width    x    img height   img width div width

User · Answer

ok guys  i think i improved the source code to be able to let the image load before trying to find out its properties  otherwise it will display  0   0   because the next statement would have been called before the file was loaded into the browser  Requires jquery     function getImgSize imgSrc       var newImg   new Image        newImg src   imgSrc      var height   newImg height      var width   newImg width      p     newImg  ready function            return  width  newImg width  height  newImg height               alert  p 0   width       p 0   height

User · Answer

Thought this might be helpful to some who are using Javascript and or Typescript in 2019    I found the following  as some have suggested  to be incorrect   let img   new Image    img onload   function       console log this width  this height     Error  undefined is not an object    img src    http   example com myimage jpg     This is correct   let img   new Image    img onload   function       console log img width  img height     img src    http   example com myimage jpg     Conclusion   Use img  not this  in onload function

User · Answer

If you are using jQuery and you are requesting image sizes you have to wait until they load or you will only get zeroes     document  ready function            img   load function             alert   this  height             alert   this  width

User · Answer

This is an alternative answer for Node js  that isn t likely what the OP meant  but could come in handy and seems to be in the scope of the question  This is a solution with Node js  the example uses Next js framework but would work with any Node js framework  It uses probe-image-size NPM package to resolve the image attributes from the server side  Example use case  I used the below code to resolve the size of an image from an Airtable Automation script  which calls my own analyzeImage API and returns the image s props  import     NextApiRequest    NextApiResponse    from  next   import probe from  probe-image-size    export const analyzeImage   async  req  NextApiRequest  res  NextApiResponse   Promise lt void gt    gt      try       const result   await probe  http   www google com intl en ALL images logo gif         res json result       catch  e        res json         error  true        message  process env NODE ENV      production    undefined   e message                  export default analyzeImage   Yields     quot width quot   276   quot height quot   110   quot type quot    quot gif quot    quot mime quot    quot image gif quot    quot wUnits quot    quot px quot    quot hUnits quot    quot px quot    quot length quot   8558   quot url quot    quot http   www google com intl en ALL images logo gif quot

User · Answer

just pass the img file object which is obtained by the input element when we select the correct file it will give the netural height and width of image  function getNeturalHeightWidth file         let h  w       let reader   new FileReader          reader onload        gt            let tmpImgNode   document createElement  img            tmpImgNode onload   function               h   this naturalHeight            w   this naturalWidth                     tmpImgNode src   reader result                 reader readAsDataURL file            return h  w

User · Answer

Simply  you can test like this      lt script gt     function                document  ready function                 console log  ready                    var i   0              var img              for i 1  i lt 13  i                      img   new Image                    img src    img     i     jpg                   console log  name       img src                   img onload   function                         if this height  gt  this width                            console log this src       portrait                                              else if this width  gt  this height                            console log this src       landscape                                              else                           console log this src       square                                                                            jQuery       lt  script gt

User · Answer

My two cents in jquery Disclaimer  This does not necessarily answer this question  but broadens our capabilities  Tested and working in jQuery 3 3 1 Lets consider   You have the image url path and you want to get the image width and height without rendering it on the DOM   Before rendering image on the DOM  you need to set offsetParent node or image div wrapper element to image width and height  to create a fluid wrapper for different image sizes  i e when clicking a button to view image on a modal lightbox   This is how i will do it     image path const imageUrl     path to your image jpg      Create dummy image to get real width and height     lt img alt  quot  quot  src  quot  quot  gt    attr  quot src quot   imageUrl  on  load   function        const realWidth   this width      const realHeight   this height      alert  Original width    realWidth   Original height    realHeight

User · Answer

The thing all other have forgot is that you cant check image size before it loads  When the author checks all of posted methods it will work probably only on localhost  Since jQuery could be used here  remember that  ready  event is fired before images are loaded      xxx   width   and  height   should be fired in onload event or later

User · Answer

Also  in addition to Rex and Ian s answers  there is   imageElement naturalHeight   and  imageElement naturalWidth   These provide the height and width of the image file itself  rather than just the image element

User · Answer

Try  x000D   x000D  function sizes       console log  width    pic width   height   pic height       x000D   lt img id  pic  src  https   picsum photos 300 150  gt   lt button onclick  sizes    gt show size lt  button gt  x000D   x000D   x000D

User · Answer

You can programmatically get the image and check the dimensions using Javascript     x000D   x000D  const img   new Image    img onload   function       alert this width    x    this height     img src    http   www google com intl en ALL images logo gif   x000D   x000D   x000D   This can be useful if the image is not a part of the markup

User · Answer

Maybe this will help others  In my case  I have a File type  that is guaranteed to be an image   amp  I want the image dimensions without loading it on the DOM  General strategy  Convert File to ArrayBuffer - gt  Convert ArrayBuffer to base64 string - gt  use this as the image source with an Image class - gt  use naturalHeight  amp  naturalWidth to get dimensions  const fr   new FileReader    fr readAsArrayBuffer image      image the the  File  object fr onload        gt      const arrayBuffer  ArrayBuffer   fr result as ArrayBuffer        Convert to base64  String fromCharCode can hit stack overflow error if you pass      the entire arrayBuffer in  iteration gets around this   let binary         const bytes   new Uint8Array arrayBuffer     bytes forEach b   gt  binary    String fromCharCode b      const base64Data   window btoa binary         Create image object  Note  a default width height MUST be given to constructor  per       the docs  or naturalWidth Height will always return 0    const imageObj   new Image 100  100     imageObj src    data   image type  base64   base64Data      imageObj onload        gt        console log imageObj naturalWidth  imageObj naturalHeight          This allows you to get the image dimensions  amp  aspect ratio all from a File without rendering it  Can easily convert the onload functions to RxJS Observables using fromEvent for a better async experience     fr is the file reader  this is the same as fr onload        gt          fromEvent fr   load

User · Answer

This answer was exactly what I was looking for  in jQuery    var imageNaturalWidth      image-selector   prop  naturalWidth    var imageNaturalHeight      image-selector   prop  naturalHeight

User · Answer

function outmeInside     var output   document getElementById  preview product image      if  this height  lt  600    this width  lt  600         output src    http   localhost danieladenew uploads no-photo jpg        alert  The image you have selected is low resloution image Your image width     this width     Heigh     this height      Please select image greater or equal to 600x600 Thanks        else        output src   URL createObjectURL event target files 0         return        img src   URL createObjectURL event target files 0        this work for multiple image preview and upload   if you have to select for each of the images one by one   Then copy and past into all the preview image function and validate

User · Answer

Before using real image size you should load source image  If you use JQuery framework  you can get real image size in simple way      ImageID   load function      console log   this  width      x      this  height

User · Answer

Assuming  we want to get image dimensions of  lt img id  an-img  src      gt      Query after all the elements on the page have loaded     Or  use  onload  on a particular element to check if it is loaded  document addEventListener  DOMContentLoaded   function        var el   document getElementById  an-img       console log        naturalWidth   el naturalWidth     Only on HTMLImageElement      naturalHeight   el naturalHeight     Only on HTMLImageElement      offsetWidth   el offsetWidth       offsetHeight   el offsetHeight          Natural Dimensions  el naturalWidth and el naturalHeight will get us the natural dimensions  the dimensions of the image file   Layout Dimensions  el offsetWidth and el offsetHeight will get us the dimensions at which the element is rendered on the document

User · Answer

I think an update to these answers is useful because one of the best-voted replies suggests using clientWidth and clientHeight  which I think is now obsolete   I have done some experiments with HTML5  to see which values actually get returned   First of all  I used a program called Dash to get an overview of the image API  It states that height and width are the rendered height width of the image and that naturalHeight and naturalWidth are the intrinsic height width of the image  and are HTML5 only    I used an image of a beautiful butterfly  from a file with height 300 and width 400  And this Javascript   var img   document getElementById  img1     console log img height            img width   console log img naturalHeight     img naturalWidth   console log     img1   height         img1   width       Then I used this HTML  with inline CSS for the height and width    lt img style  height 120px width 150px   id  img1  src  img Butterfly jpg    gt    Results     Image Element   height    300         width    400            naturalHeight    300  naturalWidth    400   Jquery        height      120       width      150    Actual Rendered size      120                  150   I then changed the HTML to the following    lt img height  90  width  115  id  img1  src  img Butterfly jpg    gt    i e  using height and width attributes rather than inline styles  Results     Image Element   height     90         width    115            naturalHeight    300  naturalWidth    400   Jquery        height       90       width      115    Actual Rendered size       90                  115   I then changed the HTML to the following    lt img height  90  width  115  style  height 120px width 150px   id  img1  src  img Butterfly jpg    gt    i e  using both attributes and CSS  to see which takes precedence   Results     Image Element   height     90         width    115            naturalHeight    300  naturalWidth    400   Jquery        height      120       width      150    Actual Rendered size      120                  150

User · Answer

Recently I had same issue for an error in the flex slider  The first image s height was set smaller due to the loading delay  I tried the following method for resolving that issue and it s worked          create image with a reference id  Id shall be used for removing it from the dom later  var tempImg       lt img id  testImage    gt       If you want to get the height with respect to any specific width you set    I used window width here  tempImg css  width   window innerWidth     tempImg 0  onload   function            this  css  height    auto   css  display    none        var imgHeight     this  height           Remove it if you don t want this image anymore          testImage   remove        append to body    body   append tempImg     Set an image url  I am using an image which I got from google  tempImg 0  src   http   aspo org wp-content uploads strips jpg     This will give you the height with respect to the width you set rather than original width or  Zero

User · Answer

With jQuery library-  Use  width   and  height     More in jQuery width and jQuery heigth   Example Code-   x000D   x000D    document  ready function    x000D         button   click function   x000D        x000D          alert  Width of image          img exmpl   width     x000D          alert  Height of image          img exmpl   height     x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt  x000D   x000D   lt img id  img exmpl  src  http   images all-free-download com images graphicthumb beauty of nature 9 210287 jpg  gt  x000D   lt button gt Display dimensions of img lt  button gt  x000D   x000D   x000D

User · Answer

You can apply the onload handler property when the page loads in js or jquery like this -    document  ready function       var width   img clientWidth     var height   img clientHeight

User · Answer

To get the natural height and width   x000D   x000D  document querySelector  img   naturalHeight  document querySelector  img   naturalWidth  x000D   lt img src  img png  gt  x000D   x000D   x000D   And if you want to get style height and width   x000D   x000D  document querySelector  img   offsetHeight  document querySelector  img   offsetWidth  x000D   x000D   x000D

User · Answer

var imgSrc  imgW  imgH  function myFunction image       var img   new Image        img src   image      img onload   function                return               src image              width this width              height this height                 return img    var x   myFunction  http   www google com intl en ALL images logo gif          Waiting for the image loaded  Otherwise  system returned 0 as both width and height  x addEventListener  load  function        imgSrc   x src      imgW   x width      imgH   x height      x addEventListener  load  function        console log imgW  x  imgH    276x110     console log imgW    undefined  console log imgH    undefined  console log imgSrc    undefined    This is my method  hope this helpful

User · Answer

JQuery Answer    height       image id   height     width        image id   width

User · Answer

Before acquire element s attributes the document page should be onload   window onload function        console log img offsetWidth img offsetHeight

[javascript] How to get image size (height & width) using JavaScript?

Examples related to javascript

Examples related to jquery

Examples related to image