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";