How to get the image size (height & width) using JavaScript

In JavaScript, obtaining the size of an image (height and width) can be achieved through several different methods, depending on whether the image is already displayed on the webpage or is being loaded as a new resource. Below, I will introduce the common methods for each scenario:

1. Getting the Size of an Image Already Present on the Webpage

If the image is already present on the webpage, you can directly use the DOM API to retrieve its dimensions. Here is a basic example:

html
<img id="myImage" src="image.jpg" alt="Test Image">
<script>
  window.onload = function() {
    var img = document.getElementById('myImage');
    var width = img.clientWidth;
    var height = img.clientHeight;
    console.log("Image width: " + width + ", Image height: " + height);
  };
</script>

In this example, we first ensure the entire page has loaded (window.onload), then retrieve the image's DOM element using getElementById. Subsequently, we use the clientWidth and clientHeight properties to obtain the image's width and height.

2. Getting the Size of a Newly Loaded Image

If you need to obtain the size of an image that has not yet been added to the DOM, you can create a new Image object and read its dimensions after the image has loaded. Here is how to do it:

javascript
var img = new Image();
img.onload = function() {
  var width = img.width;
  var height = img.height;
  console.log("Image width: " + width + ", Image height: " + height);
};
img.src = 'image.jpg';

In this example, we create a new Image object and set an onload event handler that triggers once the image has loaded. Within this handler, we access the image's dimensions using the width and height properties. Finally, we set the src attribute to initiate the image loading.

Notes

• Ensure the image has fully loaded before retrieving its dimensions; otherwise, you may get 0 or incorrect values.
• For cross-origin image resources, you may need to handle CORS (Cross-Origin Resource Sharing) issues.

Using either of the above methods, you can effectively retrieve the dimensions of images in JavaScript. The choice of method depends on your specific requirements and scenario.