How to get the image size (memory) after it is loaded using js/jquery

Question

I want to know using js or jquery how can I get the size (Bytes,KB,MB) of an image after it is loaded. I don't wanna use any ajax or send any extra http request. Just like we use $("#imageId").height(), how can we get the memory size?

How accurate do you need the figure? And do you need actual memory use or file size (which are different). Multiplying the height by width by bytes per pixel (usually 4) will give you rough in-memory size, but most image files are compressed. File-size will need to come from the server. — iCollect.it Ltd, Aug 20 '13 at 10:51
@HiTechMagic it will be ok if I get even 95% correct result. Don't need the exact one. Should I go with your height*width*4 idea? — Paul Shan, Aug 20 '13 at 10:54
It depends on what you mean by memory size, as the comment above notes. Actual memory size (as in size of bitmap) would be that number, while actual RAM memory occupied might differ because of compression; I'm not an expert but I think the image is kept in memory compressed and only uncompressed into bitmap before being sent to the display device. — Alex Paven, Aug 20 '13 at 10:58
@AlexPaven I want that size which I find after going to the property tab of the image. — Paul Shan, Aug 20 '13 at 10:59
Assuming IE, that size is the size of the file and cannot be reliably found unless employing some custom browser API or making an additional HEAD request or loading all images via JS (as I mentioned somewhere below), as far as I know. Edit: On IE there is the fileSize property but there isn't an equivalent for other browsers I think — Alex Paven, Aug 20 '13 at 11:04
The real question is: What do you need the size for? That will determine what methods and levels of accuracy are suitable. — iCollect.it Ltd, Aug 20 '13 at 13:46
@HiTechMagic I tried the trick you told, but the original size is much more lesser than the calculated one. Basically I need this to create a page loader, which will propagate according to the file which is downloaded.. — Paul Shan, Aug 21 '13 at 09:27
@Paul Shan: If there is a pattern to the size (30% of h x w * 4) etc, *and* you do not need any accuracy, then just apply a *fudge factor* (like a percentage) based on your findings. Unless you hit the server you can't get an accurate figure, but sounds like you may not need an accurate figure. — iCollect.it Ltd, Aug 21 '13 at 15:55

score 6 · Answer 1 · edited May 23 '17 at 11:50

6

As per @CMS answer in Determining image file size + dimensions via Javascript?

 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);

This is the only possible solution AFAIK.

Update: I do not know how accurate this solution is, but here is my guess

function bytes(string) {
  var escaped_string = encodeURI(string);
  if (escaped_string.indexOf("%") != -1) {
    var count = escaped_string.split("%").length - 1;
    count = count == 0 ? 1 : count;
    count = count + (escaped_string.length - (count * 3));
  }
  else {
    count = escaped_string.length;
  }
}
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/png");

var base_64 = dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
console.log(bytes(base_64));

Sources : How can I estimate the disk size of a string with JavaScript?, Get image data in JavaScript?

edited May 23 '17 at 11:50

Community

1
1

answered Aug 20 '13 at 10:52

Exception

8,111
22
85
136

What part of _I don't wanna use any ajax or send any extra http request._ didnt you understand ? – Royi Namir Aug 20 '13 at 10:53
@RoyiNamir This is the only way possible AFAIK. – Exception Aug 20 '13 at 10:54
@Exception - It may be worth clarifying at the beginning of your post that it's not possible **without** an extra request and then showing how to do it. – webnoob Aug 20 '13 at 10:55
@webnoob Yes I agree! – Exception Aug 20 '13 at 10:56
But this way is time consuming. If I have to load very small images, in that case the image get loaded even before getting the response of the ajax request. But I need to trigger a function with the size as a parameter just after the image is loaded. @Exception – Paul Shan Aug 20 '13 at 10:57
Note that the example shows a HEAD request which is cheap compared to a full request (still expensive of course for many images etc.) You could also look into loading all the images via javascript if at all possible, that way you could examine additional information during loading and then place the result in the page... probably not feasible either though. – Alex Paven Aug 20 '13 at 11:00
btw this is the raw image size, a jpeg once in memory on the clients machine can be WAY bigger since the imagehandler will decompress it in memory, and that size is impossible know without measuring it on the machine itself. – Robert Hoffmann Aug 20 '13 at 11:00

How to get the image size (memory) after it is loaded using js/jquery

1 Answers1