web-dev-qa-db-fra.com

Obtention de dimensions d'image à l'aide de l'API de fichier Javascript

J'ai besoin de générer une miniature d'une image dans mon application Web. J'utilise l'API de fichier Html 5 pour générer la vignette.

J'ai utilisé les exemples de l'URL ci-dessous pour générer les vignettes.

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

J'ai réussi à générer les vignettes. Le problème que j'ai est que je ne peux générer de vignettes qu'en utilisant une taille statique. Existe-t-il un moyen d'obtenir les dimensions du fichier à partir du fichier sélectionné, puis de créer l'objet Image?

javascriptthumbnailsfileapi
48
Abishek

Oui, lisez le fichier en tant qu'URL de données et transmettez cette URL de données au src d'un 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
115
pimvdb

Ou utilisez une URL d'objet: http://jsfiddle.net/8C4UB/

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

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

img.src = url;
17
letmaik

J'ai enveloppé la réponse pimvdb dans une fonction à usage général dans mon projet:

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!");
    }
}
4
Necrontyr