5 ways to get Image width and height javascript examples

5 ways to get Image width and height javascript examples

Image contains width and height based on resolution. Sometimes we need to find the width and height of an im`age using javascript and jquery.

Images are of different types png, JPEG, and SVG.

This post covers how to find the image height and width in Javascript, Jquery, and Nodejs.

  • Using Jquery Selectors
  • Plain Javascript

How to find the height and width of an image in javascript

In Plain javascript, Two ways we can get the height and width of an image.

  • Image object
  • naturalHeight and naturalWidth

Image object

We can use load the image using the src attribute in javascript and call width and height once the image is loaded using the onload function

Here is an example

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <h3>Get Image Height and width</h3>
    <img width="200px" height="200px" src="demo.jpg">
</body>
<script>
    let img = new Image();
    img.onload = function() {
        console.log("Image Width: ", this.width)
        console.log("Image Height: ", this.height)
    };
    img.src = "demo.jpg";
</script>

naturalHeight and naturalWidth example

The First querySelector of the document object used to select an image tag querySelector method returns DOM object. This has the following properties.

  • naturalHeight
  • naturalWidth

These properties return the actual weight and height of an image not values of the img tag with width and height values. For example, displaying an image using an img tag in HTML

<img width="200px" height="200px" src="demo.jpg" id="imageid" />

Here is a javascript code to get the source image height and width

console.log("Image Width: ", document.querySelector("img").naturalWidth);
console.log("Image Width: ", document.querySelector("img").naturalHeight);

and the output is

Image Width:  4793
Image Height:  3194

if you want to get the configured styles of width and height for an image tag, Here is an example

console.log("Image Width: ", document.querySelector("img").offsetWidth);
console.log("Image Width: ", document.querySelector("img").offsetHeight);

And the output:

Image Width:  200
Image Width:  200

And also we can use different selectors like getElementById to select an image.

document.getElementById("#imageid").offsetWidth;
document.getElementById("#imageid").offsetHeight;

Jquery to find the real height and width of an image

In JQuery it is very easy to get the height and width of an image that is displayed with styles configured.

There is no direct method to retrieve the real source image height and width, We can get the DOM element using the selector of an image and can use naturalHeight and naturalWidth.

Here is a Jquery example

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  </head>

  <body>
    <h3>Get Image Height and width</h3>
    <img width="200px" height="200px" src="demo.jpg" id="imageid" />
  </body>
  <script>
    $(document).ready(function() {
        console.log("Width: " + $("#imageid").width());
        console.log("Height: " + $("#imageid").height());
         var realValues = $("#imageid").;
               console.log("Real Width: " + realValues.naturalWidth);
               console.log("Real Height: " + realValues.naturalHeight;
                });
    });
  </script>
</html>

Conclusion

To Sum Up, There are multiple ways we can find image height and width in javascript and jquery.

The above discussed how to get real image height and width as well as styles displayed to images like width and height.