How to Get Image Dimensions in JavaScript
-
Use the
widthandheightProperties to Get Image Dimensions in JavaScript -
Use
naturalWidthandnaturalHeightto Get Image Dimensions in JavaScript
Sometimes, we may need to check or validate the dimensions, i.e., the height and width of an image, before uploading it onto the hosting server or using it. We may need to check its dimensions to resize, crop, or alter the image.
We can easily do this using JavaScript.
In this article, we will learn how to get the dimensions or check the height and width of an image using JavaScript.
Use the width and height Properties to Get Image Dimensions in JavaScript
We can quickly get the dimensions of an image using the width and height properties in JavaScript. The program below will demonstrate this to us.
var i = new Image();
i.src =
'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2560px-Image_created_with_a_mobile_phone.png';
i.onload = function() {
alert(this.width + 'x' + this.height);
}
Output:
We used the new Image() constructor to create an image object in the program above. Then, the Image() constructor created a new image element instance.
The i.src picture is then added using an image URL source, and the height and width of the image are determined using the i.onload() method.
However, this program only displays the size of the img element as rendered on the page instead of the image’s natural height and width.
Use naturalWidth and naturalHeight to Get Image Dimensions in JavaScript
While working with the dimensions of an image, it is always highly recommended that we figure out the real width and height of an image.
So, we will consider using the naturalWidth and naturalHeight properties to retrieve the exact dimensions of an image using JavaScript.
The naturalWidth and naturalHeight are read-only properties, and they are used to find out the original width and height of an image.
We may use the width and height elements of the img tag to change the height and width of an image shown on our webpage. The naturalWidth and naturalHeight properties are used in situations where the original width or height of the image is required.
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Real Image Width and Height</title>
<script>
function imgSize(){
var myImg = document.querySelector("#sky");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
}
</script>
</head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2560px-Image_created_with_a_mobile_phone.png" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>
</body>
</html>
Output:
While using this method, we will probably get very inconsistent results. It is also essential to consider these two situations before directly finding the dimensions of an image.
The image might not have been fetched, and trying to get the dimensions in such a case will give us incorrect outputs.
First, we’ll have to make sure that the image is loaded. We will also need to check whether the image is loading from the browser’s cache.
The issue roots from within, that is, when the JavaScript runs. If the JavaScript runs before that image has been fully downloaded and rendered, the result will be 0.
However, the result will be correct if the JavaScript runs after the image has been downloaded and rendered.
<html>
<head>
<title>Title of the Document</title>
<style>
img {
margin: 20px;
}
</style>
</head>
<body>
<div>Click on img to see the result</div>
<script>
let img = document.createElement('img');
img.id = 'imgId';
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2560px-Image_created_with_a_mobile_phone.png';
document.body.appendChild(img);
img.addEventListener("click", imgSize);
function imgSize() {
let img = document.getElementById('imgId');
let width = img.clientWidth;
let height = img.clientHeight;
alert("Original width=" + width + ", " + "Original height=" + height);
}
</script>
</body>
</html>i.addEventListener('load', function() {
console.log('Width: ', this.naturalWidth);
console.log('Height: ', this.naturalHeight);
});
This link will provide the code used in the above example.
The minimum that we can do is ensure the image has loaded before we measure it. Images emit a load event when they are finished, and you could use the callback to do the measurements.
We will also make some error handling, as images can emit an error event.