Tutorial :Get height/width of image in Javascript (ideally without loading the image at all)



Question:

Sorry if this has already been answered, but I can't find it if so.

I want to find the height and width of an image file in Javascript. I don't actually need to show the image in the page, just the height and width.

At the moment I've got the following code, but it's returning height and width 0 (in Mozilla 5).

  var img = new Image();    img.src = "./filename.jpg";    var imgHeight = img.height;    var imgWidth = img.width;    alert("image height = "  + imgHeight + ", image width = " + imgWidth);  

The file definitely exists, it's in the same directory as the HTML, and it doesn't have height and width 0 :)

What am I doing wrong?


Solution:1

If the image is not loaded, it won't have its' height and width set. You have to wait until the image is fully loaded, then inspect its' size. Maybe something along these lines:

function getWidthAndHeight() {      alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size.");      return true;  }  function loadFailure() {      alert("'" + this.name + "' failed to load.");      return true;  }  var myImage = new Image();  myImage.name = "image.jpg";  myImage.onload = getWidthAndHeight;  myImage.onerror = loadFailure;  myImage.src = "image.jpg";  


Solution:2

The following code will get you the width/height without waiting for the image to load completely, making it significantly faster than the other solutions here.

For testing change abc123 in image source to any random string to prevent caching.

There is a JSFiddle Demo as well.

<div id="info"></div>  <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">    <script>  getImageSize($('#image'), function(width, height) {      $('#info').text(width + ',' + height);  });    function getImageSize(img, callback) {      var $img = $(img);        var wait = setInterval(function() {          var w = $img[0].naturalWidth,              h = $img[0].naturalHeight;          if (w && h) {              clearInterval(wait);              callback.apply(this, [w, h]);          }      }, 30);  }  </script>  


Solution:3

The height and width properties of an image element (like the offsetHeight and offsetWidth properties of any element), return 0 instead of the actual values until it has been added to some document (and if its style.display attribute is not set to "none").
A common way to work around this is displaying the image outside the visible area of your page; your users will not see it, and its height and width properties will return the actual values instead of 0. Then you should remove the image from the document.

var img = new Image();  img.src = "./filename.jpg";  img.style.position = "absolute";  img.style.left = -9999;             // Image width must not exceed 9999 pixels  img.style.visibility = "hidden";    // Maybe you can remove this  document.body.appendChild(img);  var imgHeight = img.height;  var imgWidth = img.width;  alert("image height = "  + imgHeight + ", image width = " + imgWidth);   document.body.removeChild(img);     // Removes the image from the DOM (This does not destroy the image element)  


Solution:4

If you check this link here is a method to get all the image dimensions in a directory with PHP which checks it without having to load it to the page. This might help you. You can pass it to your js with a

var dimensions = <?php echo json_encode($imageDimensions)?>  

PHP Get dimensions of images in dir

I think this is a better approach if you really don't want to load the images


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »