Javascript Get Image Width And Height From File

In this article, we are going to explore two methods for obtaining the width and height of an image file using JavaScript.

Get Image Height & Width Using the FileReader API

The FileReader API allows you to read the contents of a file asynchronously. Utilizing this, you can extract image metadata, including its dimensions. Here's the example:

<input type="file" id="imageInput" />
<script>
  document.getElementById('imageInput').addEventListener('change', function (event) {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = function (e) {
      const img = new Image();
      img.src = e.target.result;
      img.onload = function () {
        // Access image dimensions
        console.log(this.width);
        console.log(this.height);
      };
    };
    reader.readAsDataURL(file);
  });
</script>

Explanation of the above example:

1. Use the <input> element to allow users to select an image file.
2. FileReader reads the file asynchronously.
3. Create an image element, set its source to the data URL, and retrieve dimensions on load.

How To Get Image Dimensions Using HTML Image Element

In this example, we will use the naturalWidth and naturalHeight properties of the HTML Image Element to get an image's height and width.

<img src="https://app.3schools.in/logo.jpg" id="imgElement" width="50"/>
<script>
  const img = document.getElementById('imgElement');
  img.onload = function(){
      console.log(img.naturalWidth);
      console.log(img.naturalHeight);
  }
</script>

Explanation of the code snippet:

1. Include an image element with the desired source.
2. Access naturalWidth and naturalHeight properties directly for image dimensions.

Conclusion

In this article, you have learned two methods to retrieve image dimensions using JavaScript. The first method is using the FileReader API for dynamic file uploads and the second method is using the HTML Image Element for pre-existing images.