How to get the image height and width in JavaScript

Post Views: 25

In this tutorial, you will learn how to get the size of an image using JavaScript. I said the size of an image, so this could be a little bit confusing. Don’t worry I am explaining. The size here refers to the height and width of an image. But here another question arises that what kind of size? the actual height and width of an image file or the image height and width which is displaying on the browser?

So, in this tutorial, you gonna learn how to get the actual height and width of an image file in JavaScript

And you will also learn how to get the height and width of an image displaying on a webpage in JavaScript.

Without being confused anymore just look at these codes and examples so that I can clear all your doubts.

Get height and width of image in JavaScript

Okay, I have an image with the file name myfile.jpg and in the same directory just create an HTML file to show the image on a webpage.

And create a JavaScript function to show the height and width (size) of the image.

<!DOCTYPE html>
<html>
<head>
  <title>Get image height and width using JavaScript</title>
</head>
<body>
  <button onclick="myfunction()">click to explore</button>
  <div id="result_height"></div>
  <div id="result_width"></div>
  <img src="filename.jpg" id="my_image">
  <script type="text/javascript">
    function myfunction(){
      var height=document.getElementById('my_image').height;
      var width=document.getElementById('my_image').width;
      document.getElementById('result_height').innerHTML=height;
      document.getElementById('result_width').innerHTML=width;
    }
  </script>
</body>
</html>

If you click on the button click on the explore you will get the height and width of the image.

But I didn’t define any size ( height and width ) for the image.

<script type="text/javascript">
    function myfunction(){
      var height=document.getElementById('my_image').height;
      var width=document.getElementById('my_image').width;
      document.getElementById('result_height').innerHTML=height;
      document.getElementById('result_width').innerHTML=width;
    }
  </script>

So, this JavaScript function will show you the actual size of the image file unless you define any size other than the actual size.

How to Create A Countdown Timer with Progress Bar in JavaScript

<img src="filename.jpg" id="my_image" height="50px" width="50px">
  <script type="text/javascript">
    function myfunction(){
      var height=document.getElementById('my_image').height;
      var width=document.getElementById('my_image').width;
      document.getElementById('result_height').innerHTML=height;
      document.getElementById('result_width').innerHTML=width;
    }
  </script>

You can now see that I have declared image height and width here :

<img src="filename.jpg" id="my_image" height="50px" width="50px">

So this script will now show you the size I have defined here.

Now it’s time to learn how to show you the actual or real image size of an image file using JavaScript.

How To Change Background Color Every Seconds in JavaScript

How To Scroll To A Specific Position of A Webpage in JavaScript

Get real height and width of image in JavaScript

Now just try it on your browser

<!DOCTYPE html>
<html>
<head>
  <title>Get image height and width using JavaScript</title>
</head>
<body>
  <button onclick="myfunction()">click to explore</button>
  <div id="result_height"></div>
  <div id="result_width"></div>
  <img src="filename.jpg" id="my_image" height="50px" width="50px">
  <script type="text/javascript">
    function myfunction(){
      var height=document.getElementById('my_image').naturalHeight;
      var width=document.getElementById('my_image').naturalWidth;
      document.getElementById('result_height').innerHTML=height;
      document.getElementById('result_width').innerHTML=width;
    }
  </script>
</body>
</html>

Here I have also declared the height and width of the image to be shown on the webpage.

But this time I have used the below script which is slightly different from the previous one.

function myfunction(){ 
var height=document.getElementById('my_image').naturalHeight; 
var width=document.getElementById('my_image').naturalWidth; 
document.getElementById('result_height').innerHTML=height; 
document.getElementById('result_width').innerHTML=width; 
}

.naturalHeight and .naturalWidth will give you the actual height and width of the image file.

So, this time it will show you the real size of your image, not the size you have mentioned here

<img src="filename.jpg" id="my_image" height="50px" width="50px">

I hope this post of get image height and width in JavaScript is useful to you. Feel free to comment.

How to get the image height and width in JavaScript

Get height and width of image in JavaScript

Get real height and width of image in JavaScript

Leave a Reply Cancel reply