Asked  7 Months ago    Answers:  5   Viewed   24 times

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.

 Answers

67

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';
Tuesday, June 1, 2021
 
kensil
answered 7 Months ago
36

If you want file size, simply decode your base64 string and check the length.

var src ="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

var base64str = src.substr(22);
var decoded = atob(base64str);

console.log("FileSize: " + decoded.length);
Wednesday, August 4, 2021
 
venkatesh shanmuganathan
answered 5 Months ago
19

Finally fixed!

This wasn't a problem with the code or css, its apparently a known problem with my version of Chrome. Basically, even if certain images/files are cached, Chrome still tries a if-modified-since GET request to server. So to fix, I've set the expiry times for cache filetypes using the .htaccess file to override this - i.e. ExpiresByType image/jpg "access plus 4 hours" http://code.google.com/p/chromium/issues/detail?id=102706

Wednesday, August 18, 2021
 
rojo
answered 4 Months ago
39

Something like this?

var oPreviewImg = new Image();
oPreviewImg.onload = function(){
  console.log(this.size);
  alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size.");
  return true;
};

oPreviewImg.onerror = function(){
  alert("'" + this.name + "' failed to load.");
  return true;
}

oPreviewImg.src = "//placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150";

var xhr = new XMLHttpRequest();
xhr.open('HEAD', oPreviewImg.src, true);
xhr.onreadystatechange = function() {
    console.log('this', this);
  if ( xhr.readyState == 4 ) {
    if ( xhr.status == 200 ) {
      alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
    } else {
      alert('ERROR');
    }
  }
};
xhr.send(null);

Live version

Update Live version replaced with Fiddle, however, due to cross site scripting concerns, the size is no longer being retrieved effectively.

Saturday, October 16, 2021
 
Michal Charemza
answered 2 Months ago
76

You can check the .complete attribute, it should mostly be true is image is cached.

If you preload them when they are cached, its not going to cause much network traffic.. Are you trying to save on memory?

You can do a head request via ajax and if it returns 304 instead of 200, it would mean its there in the cache.

Regarding References : http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Wednesday, November 10, 2021
 
user1438082
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share