• Skip to primary navigation
  • Skip to main content

The Programming Expert

Solving All of Your Programming Headaches

  • Home
  • Learn to Code
    • Python
    • JavaScript
  • Code Snippets
    • HTML
    • JavaScript
    • jQuery
    • PHP
    • Python
    • SAS
    • Ruby
  • About
  • Write for Us
You are here: Home / JavaScript / Using JavaScript to Get Image Dimensions

Using JavaScript to Get Image Dimensions

June 15, 2022 Leave a Comment

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:

Please enter an image source address below to see it’s dimensions:


Show Image Dimensions

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.

Other Articles You'll Also Like:

  • 1.  JavaScript asin – Find Arcsine and Inverse Sine of Number
  • 2.  Mastering JavaScript: Looping Through Arrays
  • 3.  Using JavaScript to Get URL Hash
  • 4.  Loop Through an Array of Objects in JavaScript
  • 5.  Creating a JavaScript Function to Add Two Numbers
  • 6.  Using JavaScript to Check if String Contains Only Numbers
  • 7.  Subtract All Numbers in an Array Using JavaScript
  • 8.  How to Remove All Numbers From String in JavaScript
  • 9.  Using JavaScript to Check if a Number is Divisible by 3
  • 10.  Using JavaScript to Remove Character From String

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · The Programming Expert · About · Privacy Policy