DCJones DCJones - 27 days ago 10
Javascript Question

Check selected image dimenions and alert if out of scope

I have a function that displays a selected image along with the image width and height. I would like to put in a check to alert if the image dimensions are greater that 390x390. I have marked the place I think a size check should go, I may be wrong. But it does not work anyway.

If someone has time you they please take a look to see how I should be dong the size check.

Many thanks in advance for your time.

My script:

window.URL = window.URL || window.webkitURL;
var elBrowse = document.getElementById("image_field"),
elPreview = document.getElementById("preview2"),
useBlob = false && window.URL; // `true` to use Blob instead of Data-URL

function readImage (file) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.addEventListener("load", function () {
var imageInfo = '<br><br>Your selected file size is<br> Display width ' +
image.width + ', Display height ' +
image.height + ' ' + '';


elPreview.appendChild( this );
elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>');
});
image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
if (useBlob) {
window.URL.revokeObjectURL(file);
}
});
reader.readAsDataURL(file);
}

elBrowse.addEventListener("change", function() {
var files = this.files;
var errors = "";
if (!files) {
errors += "File upload not supported by your browser.";
}
if (files && files[0]) {
for(var i=0; i<files.length; i++) {
var file = files[i];
if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
readImage( file );
} else {
errors += file.name +" Unsupported Image extension\n";
}

// SOMETHING LIKE THIS
if( (image.width < 390 && image.height < 390) .test(file.name) ) {

readImage( file );
} else {
errors += file.name +" Selected image is to small\n";
}
// END
}
}
if (errors) {
alert(errors);
}
});

Answer

so you need to move the checking to the event listener because that's the first place where you can know the image resolution here you don't have the errors list, so you need to modify it a bit yet, but you can start from here:

window.URL = window.URL || window.webkitURL;
var elBrowse = document.getElementById("image_field"),
elPreview = document.getElementById("preview2"),
useBlob = false && window.URL; // `true` to use Blob instead of Data-URL

function readImage (file) {

  var reader = new FileReader();
  reader.addEventListener("load", function () {
    var image = new Image();

    image.addEventListener("load", function () {
        if(image.width <= 390 && image.height <= 390)
        {
        var imageInfo = '<br><br>Your selected file size is<br>  Display width ' +
        image.width + ', Display height ' + 
        image.height + ' ' + '';


        elPreview.appendChild( this );
        elPreview.insertAdjacentHTML("beforeend",  imageInfo +'<br>');
        } else {
             alert ( file.name +" Selected image is to big\n");  
        }
    });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
    if (useBlob) {
      window.URL.revokeObjectURL(file); 
    }
  });
  reader.readAsDataURL(file);
}

elPreview.addEventListener("change", function() {
var files  = this.files;
var errors = "";
if (!files) {
  errors += "File upload not supported by your browser.";
}
if (files && files[0]) {
  for(var i=0; i<files.length; i++) {
  var file = files[i];
  if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {

        readImage( file ); 

  } else {
    errors += file.name +" Unsupported Image extension\n";  
  }

  }
}
if (errors) {
 alert(errors); 
}
});

for the file variable (on the first place you aimed to check the dimensions, you can only base your condition on the file size - in bytes)