How to use‘width’ and ‘height’ properties in JavaScript in Javascript

Approach 2: Using HTML “naturalWidth” and “naturalHeight” Attributes

In this approach, we will dynamically display the dimensions or height and width of the uploaded image on the HTML page. In the HTML structure, there is a file upload option through which the user can upload the file and JavaScript is used to load the selected image and extract the dimensions when the file is completely loaded. Once the image gets loaded, the dimensions of the image are displayed to the user in terms of an alert box. We have also used some styling properties to align the components properly.

Example: In the below HTML code, we have used the width and height properties of JavaSctipt that are used to specify and also used to manipulate the dimensions of images and containers.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>w3wiki</title> 
    <style> 
        #container { 
            text-align: center; 
        } 
  
        #image { 
            max-width: 200px; 
            max-height: 200px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        w3wiki 
    </h1> 
    <h3> 
        Approach 1: Using "width"  
          and "height" Properties 
    </h3> 
    <input type="file" id="imageInput" 
           accept="image/*"> 
    <div id="container"> 
        <img id="image" alt="Sample Image"> 
        <p> 
            Click button to  
              get image dimensions: 
        </p> 
        <button id="getDimensionsButton"> 
            Show Dimensions 
        </button> 
    </div> 
    <script src="./script.js"> </script> 
</body> 
  
</html>

Javascript

let imgInput = 
    document.getElementById('imageInput'); 
let btn = 
    document. 
        getElementById('getDimensionsButton'); 
let previewImage = 
    document.getElementById('image'); 
  
btn.addEventListener('click', () => { 
    let file = imgInput.files[0]; 
    if (file) { 
        let newImage = new Image(); 
        newImage.src = 
            URL.createObjectURL(file); 
        newImage.onload = 
            function () { 
                let w = newImage.width; 
                let h = newImage.height; 
                alert(`Image Dimensions:  
                    ${w} x ${h} pixels`); 
                previewImage.src = newImage.src; 
            }; 
    } else { 
        previewImage.src = ''; 
        alert('No image selected.'); 
    } 
}); 

Output:

JavaScript Program to Get the Dimensions of an Image

In this article, we need to retrieve the dimensions of an Image. The dimension of the image is nothing but the height and width of the image. This task is to be performed using JavaScript language. As it is a completely interactive statement, we will use HTML and CSS to make the application GUI-based for better understanding and concept understanding.

We can get the dimensions of an image in JavaScript using two different approaches:

Table of Content

Using ‘width’ and ‘height’ properties in JavaScript
Using HTML “naturalWidth” and “naturalHeight” Attributes

So, let’s see each of the approaches with its implementation in terms of examples.

Tags:

#Geeks Premier League 2023 #JavaScript-Program #Geeks Premier League #JavaScript #Web Technologies