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

90

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?

javascript image

— Pekka
source

img.onload = function () {console.log(img.height, img.width)}

— neaumusic

130

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.

— Gabriel McAdams
source

Cela ne fonctionnera pas avec les images qui ne sont pas encore chargées. Cela pourrait valoir la peine de l'ajuster pour qu'il fonctionne correctement pour d'autres personnes qui tombent sur cette réponse.

— James

11

@Gabriel, j'utilise ceci mais avec une newImg.onloadfonction pour m'assurer que l'image est chargée lorsque je règle la largeur / hauteur. Êtes-vous d'accord pour que je modifie votre réponse en conséquence?

— Pekka

2

Juste une note latérale: Chrome / OSX peut avoir des problèmes avec les images en cache où vous obtenez 0 comme hauteur / largeur en utilisant cette technique.

— David Hellsing

2

comment puis-je obtenir la hauteur et la largeur de retour ... ?? parce que ces variables ne sortent pas de onload

— jack

5

@GabrielMcAdams, si vous ajoutez if(newImg.complete || newImg.readyState === 4) newImg.onload();à la fin de votre fonction, cela résoudra le problème sur Chrome / OSX qui empêche le chargement de se déclencher lorsque les images sont chargées à partir du cache.

— Prestaul

101

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

— Bugster
source

8

Fonctionne aussi sur Chrome

— bcoughlan

4

Ce sujet est toujours d'actualité en 2013. Voici un lien avec une excellente solution de contournement pour IE7 / 8: jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie

— BurninLeo

4

C'est la réponse gagnante en 2018. Fonctionne partout. ( Tableau de compatibilité du navigateur sur MDN.)

— 7vujy0f0hy

3

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.

— Myles
source

Bien sûr - je n'ai pas à le mettre dans le document. Je vais le faire de cette façon, bravo!

— Pekka

3

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

— romain
source

est elementune sélection jQuery? Qu'en est-il de la hauteur?

— Istiaque Ahmed

2

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();
});

— Wagner Bertolini Junior
source