Getting image height and width in JavaScript


In this blog you will learn that how to get height and width of an image in JavaScript



1- This is our HTML page

	
<h2>Choose image to preview</h2>
    
    <input type="file" id="header-image" >
    <div width="200" height="40"></div>


2-This is our JavaScript code 

	
    var file = document.getElementById("header-image");
            file.addEventListener('change', function () {
                var image = this.files[0];
                var url = URL.createObjectURL(image );
                var pic = new Image();
                pic.src = url;
                pic.onload = function(){
                  var pic_width = pic.width;
                  var pic_height = pic.height;
                  
                  alert("width and height of an image is "+pic_width+" and "+pic_height);
                }
            });



 

Output

How to get height and width of an image in javascript

Do you know how to get file size in javascript if no click on the link-