JavaScript Program to Get the Dimensions of an Image

Have you ever been challenged by the arduous task of determining the dimensions of an image? This JavaScript program provides an elegant solution for this predicament, enabling you to effortlessly procure the dimensions of any image.

Within a concise snippet of code, you can swiftly retrieve the image's width and height, endowing you with the capability to tailor it to your precise specifications. This software's invaluable assistance empowers you to showcase images in a manner that is both receptive and aesthetically pleasing to the eyes of your audience, enhancing the overall appeal of your website or application.

If you're looking to broaden your horizons in the realm of JavaScript, we have just the course for you! Our interactive JavaScript course is designed to provide you with comprehensive instruction, starting from the fundamentals and progressing to advanced techniques, ultimately culminating in certification upon completion.

Take advantage of this opportunity to immerse yourself in the intricacies of JavaScript and elevate your skillset to new heights. Follow the link provided to learn more and enroll in the course today!

Get Dimensions of an Image

In the program given below, new Image() constructor is used to create an image object.

The Image() constructor creates a new image element instance.

img.src is then used to add the image using an image URL source.

The img.onload() function is used to access the height and width of the image.

Program to Get the Dimensions of an Image

// JavaScript Program to get the dimensions of an image

const img = new Image();

// get the image
img.src = 'https://www.shutterstock.com/image-photo/diverse-amazon-forest-seen-above-600w-2072628056.jpg';

// get height and width
img.onload = function() {
  console.log('width ' + this.width)
  console.log('height '+ this.height);
}

width 1040
height 922

Conclusion

In conclusion, understanding the dimensions of an image is crucial for ensuring that it looks its best on your website. By using this JavaScript program that we have provided, you can easily obtain the dimensions of any image you have on your website. This program is simple to use and can be a valuable asset for web developers, designers.

If you're looking to improve your website's overall user experience, paying attention to image dimensions is a great place to start. Not only will it improve the visual appeal of your site, but it can also improve the website's loading speed and overall performance.