Search code examples
javascriptimageheightwidth

Getting width and height from a picture using Javascript

How can I get width and height from a picture stored in a directory using Javascript?

Solution

  • From a web browser:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Image Dimensions</title>
</head>

<body>
  <img id="myImage" src="image.png">

  <script>
  var img = document.getElementById("myImage");
  img.onload = function (event) {
    console.log(`natural: ${img.naturalWidth}, ${img.naturalHeight}`);
    console.log(`width,height: ${img.width}, ${img.height}`);
    console.log(`offset: ${img.offsetWidth}, ${img.offsetHeight}`);
  }
  </script>

</body>
</html>