mostrar - obtener dimensiones de una imagen javascript

Obteniendo Dimensiones de Imagen usando Javascript File API

Question

Necesito generar una miniatura de una imagen en mi aplicación web. Hago uso de la API de archivo Html 5 para generar la miniatura.

Hice uso de los ejemplos de la URL a continuación para generar las miniaturas.

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Tengo éxito en generar las miniaturas. El problema que tengo es que puedo generar miniaturas solo usando un tamaño estático. ¿Hay alguna manera de obtener las dimensiones del archivo del archivo seleccionado y luego crear el objeto Imagen?

Answer 1

Envolví la respuesta de pimvdb en una función para propósito general en mi proyecto:

function checkImageSize(image, minW, minH, maxW, maxH, cbOK, cbKO){
    //check whether browser fully supports all File API
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var fr = new FileReader;
        fr.onload = function() { // file is loaded
            var img = new Image;
            img.onload = function() { // image is loaded; sizes are available
                if(img.width < minW || img.height < minH || img.width > maxW || img.height > maxH){  
                    cbKO();
                }else{
                    cbOK();
                }
            };
            img.src = fr.result; // is the data URL because called with readAsDataURL
        };
        fr.readAsDataURL(image.files[0]);
    }else{
        alert("Please upgrade your browser, because your current browser lacks some new features we need!");
    }
}    

Answer 2

O use un objeto URL: http://jsfiddle.net/8C4UB/

var url = URL.createObjectURL(this.files[0]);
var img = new Image;

img.onload = function() {
    alert(img.width);
};

img.src = url;

Answer 3

Sí, lea el archivo como una URL de datos y pase esa URL de datos al src de una Image : http://jsfiddle.net/pimvdb/eD2Ez/2/ .

var fr = new FileReader;

fr.onload = function() { // file is loaded
    var img = new Image;

    img.onload = function() {
        alert(img.width); // image is loaded; sizes are available
    };

    img.src = fr.result; // is the data URL because called with readAsDataURL
};

fr.readAsDataURL(this.files[0]); // I''m using a <input type="file"> for demonstrating