Using JavaScript to Get Image Dimensions

We can use JavaScript to get the dimensions of an image easily by using the Style height and width properties.

var someImage;
var imageWidth = someImage.width;
var imageHeight = someImage.height;

Let’s see how simple this can be using the following image from our site.

Here is the HTML code:

<img id="home-page-image" style="width:400px; height:300px;" src="http://theprogrammingexpert.com/wp-content/uploads/2021/12/tpe-main2-e1638420493699.jpg">

And here is what our image looks like.

Now let’s get the dimensions of this image using our code from above.

var tpeImage = document.getElementById("home-page-image");
var imageWidth = tpeImage.width;
var imageHeight = tpeImage.height;

console.log(imageWidth + "x" + imageHeight);

#Output:
400x300

You will notice that the width and height for the image are set in the HTML for this example. Let’s say our image did not have the height and width set and we still wanted to get the image dimensions. Well, we will have to add a step if this were the case, which we will do below.

Using JavaScript to Get Image Dimensions Of Any Image

So let’s take our example again but just have the image without a predefined height and width.

<img id="home-page-image2" src="http://theprogrammingexpert.com/wp-content/uploads/2021/12/tpe-main2-e1638420493699.jpg">

You will notice that there are no style attributes attached to the image this time. Let’s see what happens if we try to get the dimensions using our code from above.

var tpeImage = document.getElementById("home-page-image2");
var imageWidth = tpeImage.width;
var imageHeight = tpeImage.height;

console.log(imageWidth + "x" + imageHeight);

#Output:
0x0

You can see that our output returns 0x0 because that is the value for the height and width properties for the image currently.

So to get the actual width and height of the image, we just need to create a new image object and give it our image src. We then need to wait until the browser loads our new image using the onload event, and then we can get the width and height from it.

Here is the code:

var tpeImage2 = new Image();
tpeImage2.src = document.getElementById("home-page-image2").src;

tpeImage2.onload = function() {
  console.log(tpeImage2.width + "x" + tpeImage2.height);
}
#Output:
442x343

Using JavaScript to Get Image Dimensions Of a User Inserted Image

Finally, we will create a function that takes the src of an image that the user will give us and we will load the image into our page, returning the width and height of the image.

Here is our HTML setup:

<div>
  <p>Please enter an image source address below to see it's dimensions:</p>
  <input type="text" id="imgSource">
  <img id="userImage" src="">
  <div id="results"></div>
  <div id="click-me" onclick="showImageDimensions()">Show Image Dimensions</div>
</div>

We will use the value property to get the user imputed image src. We can then use that image src to put it into our code above to load the image to our page.

We will finally display the image by changing the src property of our image above, and show the dimensions of the image using the textContent property.

We will put all this code into a function called showImageDimensions().

Here is our JavaScript code:

function showImageDimensions(){
  var ourImage = new Image();
  //Get the user img src
  var userSRC = document.getElementById("imgSource").value;

  //Apply it to our new image.
  ourImage.src = userSRC;

  //Wait until the image is load and show the image and it's dimensions
  ourImage.onload = function() {
    document.getElementById("userImage").src = userSRC;
    document.getElementById("results").textContent = "Image Dimensions: " + ourImage.width + "x" + ourImage.height;
  }
};

The final code and output for showing the dimensions of a user image is below:

Code Output:

Full Code:

<div>
  <p>Please enter an image source address below to see it's dimensions:</p>
  <input type="text" id="imgSource">
  <img id="userImage" src="">
  <div id="results"></div>
  <div id="click-me" onclick="showImageDimensions()">Show Image Dimensions</div>
</div>

<script>

function showImageDimensions(){
  var ourImage = new Image();
  var userSRC = document.getElementById("imgSource").value;
  ourImage.src = userSRC;
  ourImage.onload = function() {
    document.getElementById("userImage").src = userSRC;
    document.getElementById("results").textContent = "Image Dimensions: " + ourImage.width + "x" + ourImage.height;
  }
};

</script>

Hopefully this article has been useful for you to learn how to use javascript to get image dimensions.