javascript - pagina - obtener ancho y alto de una imagen jquery

Verifique el ancho y alto de la imagen antes de cargarla con Javascript

Question

Tengo un JPS con un formulario en el que un usuario puede poner una imagen:

<div class="photo">
<div>Photo (max 240x240 and 100 kb):</div>
<input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>

He escrito esto js:

function checkPhoto(target) {
if(target.files[0].type.indexOf("image") == -1) {
document.getElementById("photoLabel").innerHTML = "File not supported";
return false;
}
if(target.files[0].size > 102400) {
document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
return false;
}
document.getElementById("photoLabel").innerHTML = "";
return true;
}

que funciona bien para verificar el tipo y tamaño del archivo. Ahora quiero verificar el ancho y alto de la imagen pero no puedo hacerlo.
Lo he intentado con target.files[0].width pero no estoy undefined . Con otras formas obtengo 0 .
¿Alguna sugerencia?

Answer 1

El archivo es solo un archivo, debes crear una imagen como esta:

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
alert(this.width + " " + this.height);
};
img.src = _URL.createObjectURL(file);
}
});

Demostración: http://jsfiddle.net/4N6D9/1/

Supongo que te das cuenta de que esto solo se admite en algunos navegadores. Sobre todo firefox y cromo, podría ser la ópera también por ahora.

Answer 2

En mi opinión, la respuesta perfecta que debes requerir es

 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 > 100 || width > 100) {
alert("Height and Width must not exceed 100px.");
return false;
}
alert("Uploaded image has valid Height and Width.");
return true;
};
}

Answer 3

Estoy de acuerdo. Una vez que se carga en algún lugar al que puede acceder el navegador del usuario, es bastante fácil obtener el tamaño. Como debe esperar a que se cargue la imagen, querrá conectar el evento de carga para img .

var width, height;
var img = document.createElement("img");
img.onload = function() {
// `naturalWidth`/`naturalHeight` aren''t supported on <IE9. Fallback to normal width/height
// The natural size is the actual image size regardless of rendering.
// The ''normal'' width/height are for the **rendered** size.
width = img.naturalWidth || img.width;
height = img.naturalHeight || img.height;
// Do something with the width and height
}
// Setting the source makes it start downloading and eventually call `onload`
img.src = "http://your.website.com/userUploadedImage.jpg";