How to get the original image size (width and height) using JavaScript
Today we will show you how to get the original image size (width and height) using JavaScript. In the previous article, we have explained how to get current image size.
Checkout more articles on JavaScript
You can use the naturalWidth and naturalHeight to get the current width and height of the image in pixel.
Refer to the sample HTML code below to get the image size.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>How to get original image size (width and height) using JavaScript - Clue Mediator</title> <script> function getImgSize(){ var myImg = document.querySelector("#myImage"); var realWidth = myImg.naturalWidth; var realHeight = myImg.naturalHeight; console.log("Image width: ", realWidth); console.log("Image height: ", realHeight); } </script> </head> <body> <img src="/my-img.jpg" id="myImage" width="250" alt="My Image"> <button type="button" onclick="getImgSize();">Click to get Image Size</button> </body> </html> |
Using the code above you will find the width and height of the original image in the console.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
