Déterminer la taille d'origine du navigateur d'images?

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

Vous avez 2 options:

Option 1:

Retirez les widthet heightattributs et lire offsetWidthetoffsetHeight

Option 2:

Créez un Imageobjet JavaScript , définissez le src, et lisez le widthet height(vous n'avez même pas besoin de l'ajouter à la page pour ce faire).

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 par Pekka : Comme convenu dans les commentaires, j'ai changé la fonction pour qu'elle s'exécute sur l'événement «onload» de l'image. Sinon, avec de grandes images, heightet widthne retournerait rien car l'image n'était pas encore chargée.

Les images (au moins sur Firefox) ont une naturalWidthpropriété / height, vous pouvez donc l'utiliser img.naturalWidthpour obtenir la largeur d'origine

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

La source

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

/* 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);

Il suffit de changer 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();
});