web-dev-qa-db-fra.com

Déterminer la taille originale du navigateur d'images croisées?

Existe-t-il un moyen fiable, indépendant du cadre, de déterminer les dimensions physiques d'un <img src='xyz.jpg'> redimensionné côté client?

javascriptimage
87
Pekka 웃

Vous avez 2 options:

Option 1:

Supprimez les attributs width et height et lisez offsetWidth et offsetHeight.

Option 2:

Créez un objet JavaScript Image, définissez-le src, puis lisez width et height (vous n'avez même pas besoin de l'ajouter à la page. fais ça).

function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload
}

Edit by Pekka: Comme convenu dans les commentaires, j’ai modifié la fonction pour qu’elle s’exécute sur l’événement "onload" de l’image. Sinon, avec les grandes images, height et width ne renverraient rien car l’image n’a pas encore été chargée.

125
Gabriel McAdams

Les images (au moins sur Firefox) ont une propriété naturalWidth/height afin que vous puissiez utiliser img.naturalWidth pour obtenir la largeur d'origine

var img = document.getElementsByTagName("img")[0];
img.onload=function(){
    console.log("Width",img.naturalWidth);
    console.log("Height",img.naturalHeight);
}

Source

89
Bugster

Vous pouvez précharger l'image dans un objet Image javascript, puis vérifier les propriétés width et height de cet objet.

3
Myles

En changeant un peu la deuxième option de Gabriel, pour être plus facile à utiliser:

function getImgSize(imgSrc, callback) {
    var newImg = new Image();

    newImg.onload = function () {
        if (callback != undefined)
            callback({width: newImg.width, height: newImg.height})
    }

    newImg.src = imgSrc;
}

Html:

<img id="_temp_circlePic" src="http://localhost/myimage.png" 
style="width: 100%; height:100%">

Exemple d'appel:

getImgSize($("#_temp_circlePic").attr("src"), function (imgSize) {
    // do what you want with the image's size.
    var ratio = imgSize.height / $("#_temp_circlePic").height();
});
2
Wagner Bertolini Junior
/* Function to return the DOM object's in crossbrowser style */
function widthCrossBrowser(element) {
    /* element - DOM element */

    /* For FireFox & IE */
    if(     element.width != undefined && element.width != '' && element.width != 0){
        this.width  =   element.width;
    }
    /* For FireFox & IE */
    else if(element.clientWidth != undefined && element.clientWidth != '' && element.clientWidth != 0){
        this.width  =   element.clientWidth;
    }
    /* For Chrome * FireFox */
    else if(element.naturalWidth != undefined && element.naturalWidth != '' && element.naturalWidth != 0){
        this.width  =   element.naturalWidth;
    }
    /* For FireFox & IE */
    else if(element.offsetWidth != undefined && element.offsetWidth != '' && element.offsetWidth != 0){
        this.width  =   element.offsetWidth;
    }       
        /*
            console.info(' widthWidth width:',      element.width);
            console.info(' clntWidth clientWidth:', element.clientWidth);
            console.info(' natWidth naturalWidth:', element.naturalWidth);
            console.info(' offstWidth offsetWidth:',element.offsetWidth);       
            console.info(' parseInt(this.width):',parseInt(this.width));
        */
    return parseInt(this.width);

}   

var elementWidth    = widthCrossBrowser(element);
2
Roman