Get image width and height using Javascript and jQuery

: 15297

Last Updated : 24/12/2022

Posted By :- Sam

There can be situations in which you may need to validate(check) the dimensions(width or height) of an image before uploading on the server, or maybe you need to crop the image after checking its dimensions, in that case, you can do it at client-side using javascript, so in this article, I will show you how you can get and check width and height of an image using javascript or jquery.

Validate (check) image dimensions (width and height) before uploading using Javascript

Let's create the simple HTML for file browsing and a button clicking on which, we will validate the dimensions of an image.

<input type="file" name="file" id="file">
<br/>
<input type="button" value="Upload" onclick="return CheckDimension()" />
<br/>
<br/>
Width: <span id='width'></span><br/>
Height: <span id='height'></span>

now we will add the javascript function to check dimensions of image

<script type="text/javascript">
function CheckDimension() {
    //Get reference of File.
    var fileUpload = document.getElementById("file");
 
    //Check whether the file is valid Image.
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
    if (regex.test(fileUpload.value.toLowerCase())) {
 
        //Check whether HTML5 is supported.
        if (typeof (fileUpload.files) != "undefined") {
            //Initiate the FileReader object.
            var reader = new FileReader();
            //Read the contents of Image File.
            reader.readAsDataURL(fileUpload.files[0]);
            reader.onload = function (e) {
                //Initiate the JavaScript Image object.
                var image = new Image();
 
                //Set the Base64 string return from FileReader as source.
                image.src = e.target.result;
                       
                //Validate the File Height and Width.
                image.onload = function () {
                    var height = this.height;
                    var width = this.width;
                    if (height > 200 || width > 200) {
 
                       //show width and height to user
                        document.getElementById("width").innerHTML=width;
                        document.getElementById("height").innerHTML=height;
                        alert("Height and Width must not exceed 200px.");
                        return false;
                    }
                    alert("Uploaded image has valid Height and Width.");
                    return true;
                };
 
            }
        } else {
            alert("This browser does not support HTML5.");
            return false;
        }
    } else {
        alert("Please select a valid Image file.");
        return false;
    }
}
</script>

Demo output:

Here is the complete working fiddle

Validate (check) image dimensions (width and height) before uploading using jQuery

Validating or checking dimensions of an image is much similar using jQuery, we can call a function to check dimensions on image change, create a new Image source and check it's dimensions using jQuery .width and .height functions

Here are the Complete jQuery and HTML Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="file" id="file">
<br/>
<br/>
Width: <span id='width'></span><br/>
Height: <span id='height'></span>

<script>
var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
        var width=this.width;
         var height=this.height;
          $("#width").html(width);
          $("#height").html(height);
         if(width > 200 || height > 200)
         {
           alert("Width and heigth should not be more than 200px ");
         }                          
        };
        img.src = _URL.createObjectURL(file);
    }
});
</script>

In the above code, we are not checking image formats and not calling the function on button click, calling it on 'file' value change.

Using clientWidth and clientHeight in JS

For image element we can also using clientWidth and clientHeight

var img = document.getElementById('imageid'); 

var width = img.clientWidth;
var height = img.clientHeight;

this is easier solution but should be used to get width/height of image only, for other DOM elements like <div> or <p>, it shows the current in-browser size of the inner dimensions of a DOM element (excluding margin and border).

It is good to use pure Javascript based solution than jQuery based, as we should focus more on using Vanilla Javascript, which will allow us to remove jQuery load from web-application and hence it increases website speed.