1

Is there any way to get image size (kb) before loading it in browser by java script ? for example there is an image in this address : "mysite.com/content/sample.jpg" now how can we understand how much is the size (kb) of this image?

sun1987
  • 241
  • 1
  • 2
  • 16
  • Do you mean the dimension? – putvande May 05 '15 at 10:55
  • possible duplicate of [How to get image size (height & width) using JavaScript?](http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) – putvande May 05 '15 at 11:00
  • Depending on how much you control the client you can use HEAD to get the header which in many cases will include the content-length – jeremy May 05 '15 at 16:49
  • exact duplicate of [Ajax HEAD request via Javascript/jQuery](http://stackoverflow.com/questions/4715223/ajax-head-request-via-javascript-jquery) – Prasanth May 05 '15 at 16:51
  • What I mean was the size of image in KB – sun1987 May 05 '15 at 18:50

2 Answers2

0

If it's only ever a jpeg, you can just load the first chunk of the file which contains the EXIF metadata. That metadata contains width and height most of the time, although you can't be 100% certain that it's there or that it's correct. But it's probably your best bet. There are a couple of nice EXIF libraries in Javascript, and I've used this one: https://github.com/bwindels/exif-parser

It still requires you to make an HTTP request for it though, so if that's what you're worried about, there's no way to avoid it.

Anders Ekdahl
  • 22,685
  • 4
  • 70
  • 59
0

You can get it like below

 window.onload = function() {
  var image = new Image();
  image.onload = function() {
    var info = "Image Info:<br>Width: "+this.width+", Height: "+this.height;
    document.getElementById("imageInfo").innerHTML = info;
  }
  image.src = 'http://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg';
}

Here is the sample - http://plnkr.co/edit/X1cqZYv93FzK4zC5kRE7?p=preview

Pritam
  • 16
  • 2