Determining image file size dimensions via Javascript

Question

As part of a web app  once images have been downloaded and rendered on a web page  I need to determine an image s file size  kb  and resolution within the browser context  so I could  for example  display that info on the page  This needs to be done client-side  obviously  Must be able to be solved x-browser without an ActiveX control or Java applet  IE7   FF3   Safari 3   IE6 nice to have   though it doesn t have to be the same solution per browser   Ideally this would be done using system Javascript  but if I absolutely need a JQuery or similar library  or a tiny subset of it   that could be done

User · Answer

You can find dimension of an image on the page using something like  document getElementById  someImage   width   file size  however  you will have to use something server-side

User · Answer

You can get the dimensions using getElement      width and    height   Since JavaScript can t access anything on the local disk for security reasons  you can t examine local files  This is also true for files in the browser s cache   You really need a server which can process AJAX requests  On that server  install a service that downloads the image and saves the data stream in a dummy output which just counts the bytes  Note that you can t always rely on the Content-length header field since the image data might be encoded  Otherwise  it would be enough to send a HTTP HEAD request

User · Answer

Getting the Original Dimensions of the Image If you need to get the original image dimensions  not in the browser context   clientWidth and clientHeight properties do not work since they return incorrect values if the image is stretched shrunk via css  To get original image dimensions  use naturalHeight and naturalWidth properties  var img   document getElementById  imageId      var width   img naturalWidth  var height   img naturalHeight   p s  This does not answer the original question as the accepted answer does the job  This  instead  serves like addition to it

User · Answer

Most folks have answered how a downloaded image s dimensions can be known so I ll just try to answer other part of the question - knowing downloaded image s file-size   You can do this using resource timing api  Very specifically transferSize  encodedBodySize and decodedBodySize properties can be used for the purpose   Check out my answer here for code snippet and more information if you seek   JavaScript - Get size in bytes from HTML img src

User · Answer

The only thing you can do is to upload the image to a server and check the image size and dimension using some server side language like C    Edit   Your need can t be done using javascript only

User · Answer

var img   new Image    img src   sYourFilePath  var iSize   img fileSize

User · Answer

How about this   var imageUrl    https   cdn sstatic net Sites stackoverflow img sprites svg   var blob   null  var xhr   new XMLHttpRequest     xhr open  GET   imageUrl  true    xhr responseType    blob   xhr onload   function          blob   xhr response      console log blob  blob size     xhr send      http   qnimate com javascript-create-file-object-from-url   due to Same Origin Policy  only work under same origin

User · Answer

Service workers have access to header informations  including the Content-Length header   Service workers are a bit complicated to understand  so I ve built a small library called sw-get-headers   Than you need to    subscribe to the library s response event identify the image s url among all the network requests here you go  you can read the Content-Length header    Note that your website needs to be on HTTPS to use Service Workers  the browser needs to be compatible with Service Workers and the images must be on the same origin as your page

User · Answer

Check the uploaded image size using Javascript   lt script type  text javascript  gt      function check          var imgpath document getElementById  imgfile          if   imgpath value               var img imgpath files 0  size          var imgsize img 1024           alert imgsize                  lt  script gt    Html code   lt form method  post  enctype  multipart form-data  onsubmit  return check     gt   lt input type  file  name  imgfile  id  imgfile  gt  lt br gt  lt input type  submit  gt   lt  form gt

User · Answer

Regarding the width and height  var img   document getElementById  imageId      var width   img clientWidth  var height   img clientHeight   Regarding the filesize you can use performance var size   performance getEntriesByName url  0   console log size transferSize      or decodedBodySize might differ if compression is used on server side

User · Answer

Edit   To get the current in-browser pixel size of a DOM element  in your case IMG elements  excluding the border and margin  you can use the clientWidth and clientHeight properties   var img   document getElementById  imageId      var width   img clientWidth  var height   img clientHeight    Now to get the file size  now I can only think about the fileSize property that Internet Explorer exposes for document and IMG elements     Edit 2  Something comes to my mind      To get the size of a file hosted on the server  you could simply make an HEAD HTTP Request using Ajax  This kind of request is used to obtain metainformation about the url implied by the request without transferring any content of it in the response   At the end of the HTTP Request  we have access to the response HTTP Headers  including the Content-Length which represents the size of the file in bytes   A basic example using raw XHR   var xhr   new XMLHttpRequest    xhr open  HEAD    img test jpg   true   xhr onreadystatechange   function      if   xhr readyState    4         if   xhr status    200           alert  Size in bytes      xhr getResponseHeader  Content-Length           else         alert  ERROR                 xhr send null     Note  Keep in mind that when you do Ajax requests   you are restricted by the Same origin policy  which allows you to make requests only within the same domain   Check a working proof of concept here   Edit 3   1   About the Content-Length  I think that a size mismatch could happen for example if the server response is gzipped  you can do some tests to see if this happens on your server   2   For get the original dimensions of a image  you could create an IMG element programmatically  for example   var img   document createElement  img     img onload   function      alert img width     x     img height       img src  http   sstatic net so img logo png

[javascript] Determining image file size + dimensions via Javascript?

Examples related to javascript

Examples related to image