Javascript get height of Image?

Question

Hello I have the following code that gets a file, an image, from an input and posts it to php it all works great but I want to find the height and width of the image first. How do I do this? Here is my code:

 $(':file').change(function(){
  file = this.files[0];  
});

function doit(){
    var formData = new FormData($('form')[0]);
    //console.log(dataObj);



    if(file.name.length < 1) {
        TooBig = true
    }
    else if(file.size > 1000000) {
        TooBig = true
    }
    else if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg' ) {
        TooBig = true
        console.log("done");
    }else{
        TooBig = false
    }

    if(TooBig == false){
        document.getElementById('submitbtn').innerHTML = 'Uploading';
        $.ajax({
            url: 'saveImage.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data){
                console.log(data);  
                nextID = data;    
                cancel2();      
            }

        });
    }else{
        document.getElementById('thumbage2').value =  "";
        document.getElementById('labelthumb2').innerHTML = ''+height;
    }
}

I tried using

file.width;

but it didn't work, can someone help me? EDIT: I want to get the height of the image while it is still in the input field.

@Perumal93 even so, it's not necessary. If op wants to use JS so be it — Daryl Gill, Nov 28 '16 at 16:46
I think this is a duplicate of: http://stackoverflow.com/questions/7460272/getting-image-dimensions-using-javascript-file-api — Hoyen, Nov 28 '16 at 16:48
Possible duplicate of [How to get image size (height & width) using JavaScript?](http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) — SLePort, Nov 28 '16 at 16:48
@SLePort Once the issue is solved with this post, can this post be deleted to avoid too many questions with the same topic? — Wolverine, Nov 28 '16 at 16:54
@Perumal93 My vote for duplicate was not appropriate. OP does not want to get image size from DOM. — SLePort, Nov 28 '16 at 17:07
OP wants this: http://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript — Banzay, Nov 28 '16 at 17:41

Wolverine · Answer 1 · 2016-11-28T17:56:22.397

You may try this code:

var imageWidth = null;
var imageHeight = null;

$(':file').change(function(){
   var windowURL = window.URL || window.webkitURL;
   var file = this.files[0];
   var image = new Image();
   image.src = windowURL.createObjectURL(file);
   image.onload = function() {
       imageWidth = this.width;
       imageHeight = this.height;
   };
});

Later, you can use variables imageWidth and imageHeight inside doit() function for validation.

Therefore, your whole code looks like:

var imageWidth = null;
var imageHeight = null;

$(':file').change(function(){
   var windowURL = window.URL || window.webkitURL;
   var file = this.files[0];
   var image = new Image();
   image.src = windowURL.createObjectURL(file);
   image.onload = function() {
       imageWidth = this.width;
       imageHeight = this.height;
   };
});

function doit(){
    var formData = new FormData($('form')[0]);
    //console.log(dataObj);



    if(file.name.length < 1) {
        TooBig = true;
    }
    else if(file.size > 1000000) {
        TooBig = true;
    }
    else if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg' ) {
        TooBig = true;
        console.log("done");
    } else if(imageWidth > 1700 && imageHeight > 1300) {
        TooBig = true;
    } else{
        TooBig = false;
    }

    if(TooBig == false){
        document.getElementById('submitbtn').innerHTML = 'Uploading';
        $.ajax({
            url: 'saveImage.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data){
                console.log(data);  
                nextID = data;    
                cancel2();      
            }

        });
    }else{
        document.getElementById('thumbage2').value =  "";
        document.getElementById('labelthumb2').innerHTML = ''+height;
    }
}

Finally, my suggestion for you is stick with coding conventions. It helps you make the code a lot easier to read.

Javascript get height of Image?

1 Answers1