How to find image data size using javascript?

Question

On a webpage, once images have been downloaded and rendered, I need to determine an image's file size (kb) within the browser context (so I could display that info on the page, just below the image)

Maybe new XmlHttpRequest().getResponseHeader('Content-Length') is useful. — ROMANIA_engineer, Sep 10 '14 at 20:04
Asked and answered on here already. Please search before asking. http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript — Chris Caviness, Sep 10 '14 at 20:05

score 3 · Accepted Answer · answered Sep 10 '14 at 20:04

The easiest way is probably with a HEAD request returning the Content-Length:

function fileSize(img, func) {
  var xhr = new XMLHttpRequest();
  xhr.open('HEAD', img.src, true);
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      func(xhr.getResponseHeader('Content-Length')) 
    }
  }
  xhr.send()
}

Usage

fileSize(imgNode, function(size) {
  // ...
})

How to find image data size using javascript?

1 Answers1

Usage