CODEWITHSUNDEEP
javascriptjqueryhtmlimage
Aamir
Aamir

Reputation: 2283

Get Image Dimensions (Height and Width) Js or jquery

I have searched for this, but every time I implement the code it return 24 as height and width as 237 when I upload 400X400 image.

$(document).on('change','#tt' , function(){
    var img = document.getElementById('tt');
    var nheight = img.clientHeight;
    var nwidth = img.clientWidth;
    alert(nheight)
    alert(nwidth)
});

<input type="file" id="tt" name="tt" >

Is anyone know how can I get 400 as height and 400 as width in alert box when I upload 400X400 image. Any help is really much appreciated.....

Upvotes: 2

Views: 10655

Answers (2)

Rahul Patel
Rahul Patel

Reputation: 5246

Onchange event of file upload creating a Image object and attach uploaded file object as src to image object and then onload event of image object find height and width of image.

Please check below snippet for more understanding.

var _URL = window.URL || window.webkitURL;
$(document).on('change','#tt' , function(){    
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            alert("width : "+this.width + " and height : " + this.height);
        };
        img.src = _URL.createObjectURL(file);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="tt" name="tt" >

Upvotes: 5

Dev1ce
Dev1ce

Reputation: 5944

var nheight = img.clientHeight;
var nwidth = img.clientWidth;

will just get you the dimension.

Refer this -

Try 

var x = document.getElementById("myImg").naturalWidth;

the naturalHeight property to return the original height of an image, or the height property to set or return the value of the height attribute of an image

http://www.w3schools.com/jsref/prop_img_naturalwidth.asp

Upvotes: 1

Related Questions