web-dev-qa-db-fra.com

Est-il possible de vérifier les dimensions de l'image avant de télécharger?

J'ai un contrôle de téléchargement pour télécharger les images sur le serveur, mais avant de télécharger, je veux simplement m'assurer que les images ont des dimensions correctes. Y a-t-il quelque chose du côté client qui peut être fait avec javascript?

javascriptjqueryfile-uploadclient-side
54
Sabby62

Vous pouvez les vérifier avant de soumettre le formulaire:

window.URL = window.URL || window.webkitURL;

$("form").submit( function( e ) {
    var form = this;
    e.preventDefault(); //Stop the submit for now
                                //Replace with your selector to find the file input in your form
    var fileInput = $(this).find("input[type=file]")[0],
        file = fileInput.files && fileInput.files[0];

    if( file ) {
        var img = new Image();

        img.src = window.URL.createObjectURL( file );

        img.onload = function() {
            var width = img.naturalWidth,
                height = img.naturalHeight;

            window.URL.revokeObjectURL( img.src );

            if( width == 400 && height == 300 ) {
                form.submit();
            }
            else {
                //fail
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        form.submit();
    }

});

Cela ne fonctionne que sur les navigateurs modernes, il vous reste donc à vérifier les dimensions côté serveur. Vous ne pouvez pas non plus faire confiance au client, c’est une autre raison pour laquelle vous devez quand même vérifier leur côté serveur.

62
Esailija

Oui, l'API HTML5 prend en charge cela.

http://www.w3.org/TR/FileAPI/

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {

    var image, file;

    if ((file = this.files[0])) {

        image = new Image();

        image.onload = function() {

            alert("The image width is " +this.width + " and image height is " + this.height);
        };

        image.src = _URL.createObjectURL(file);


    }

});​

DÉMO (testé sur chrome)

46
Gurpreet Singh

Pour simplifier les choses, utilisez un cadre de traitement d’images javascript tel que fabric.js , processing.js et MarvinJ .

Dans le cas de MarvinJ , charge simplement l'image du côté client et utilise les méthodes getWidth () et getHeight () pour vérifier les dimensions de l'image. Avec les dimensions, vous pouvez autoriser la soumission du fichier ou informer l'utilisateur de la dimension incompatible.

Exemple: 

var image = new MarvinImage();
image.load("https://i.imgur.com/oOZmCas.jpg", imageLoaded);

function imageLoaded(){
  document.getElementById("result").innerHTML += image.getWidth()+","+image.getHeight();
}
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<div id="result"></div>
1
Gabriel Ambrósio Archanjo

Peut-être un peu tard, mais voici une version ES6 moderne de la réponse acceptée en utilisant des promesses

const getUploadedFileDimensions: file => new Promise((resolve, reject) => {
    try {
        let img = new Image()

        img.onload = () => {
            const width  = img.naturalWidth,
                  height = img.naturalHeight

            window.URL.revokeObjectURL(img.src)

            return resolve({width, height})
        }

        img.src = window.URL.createObjectURL(file)
    } catch (exception) {
        return reject(exception)
    }
})

Tu appellerais ça comme ça

getUploadedFileDimensions(file).then(({width, height}) => {
    console.log(width, height)
})
1
techouse

Si vous n'avez pas besoin de gérer les fichiers svg et que vous pouvez vous limiter à navigateurs les plus récents , vous pouvez utiliser la fonction createImageBitmap pour créer une promesse doublure:

if(typeof createImageBitmap !== "function") {
  console.error("Your browser doesn't support this method");
  // fallback to URL.createObjectURL + <img>
}

inp.oninput = e => {
  createImageBitmap(inp.files[0])
    .then((bmp) => console.log(bmp.width, bmp.height))
    .catch(console.error);
}
<input type="file" id="inp" accept="image/*">
1
Kaiido