• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
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 If Not – Check if a Condition is False
  • 2.  Using JavaScript to Run a Function Every 5 seconds
  • 3.  Adding an Underline with JavaScript
  • 4.  Using the getElementsByClassName Method in JavaScript
  • 5.  Finding the Length of a String in JavaScript
  • 6.  Using JavaScript to Capitalize the First Letter of a String
  • 7.  Using JavaScript to Round to 4 Decimal Places
  • 8.  How to Get the Cursor Position in JavaScript
  • 9.  Adding CSS Important Property Using JavaScript
  • 10.  for each char in string – How to Loop Over Characters of String in JavaScript

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 *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

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

x