Déterminer la taille originale de l'image de la croix-navigateur?

Question

Est-il fiable, cadre, indépendant de la façon de déterminer les dimensions physiques d'un <img src='xyz.jpg'> redimensionnée sur le côté client?

Answer 1

Vous avez 2 options:

Option 1:

Supprimer l' width et height d'attributs et de lire offsetWidth et offsetHeight

Option 2:

Créer un JavaScript Image objet, définissez l' src, et de lire l' width et height (vous n'avez même pas à 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 à exécuter sur l'événement onload de l'image. Sinon, avec de grandes images, height et width il ne reviendrait pas tout, parce que l'image n'était pas encore chargé.

Answer 2

Les Images (sur Firefox au moins) ont un naturalWidth/hauteur de la propriété de sorte que vous pouvez 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

Answer 3

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

Answer 4

Dans mon application, le code, je travaille sur est déjà à l'intérieur d'un gestionnaire d'événement onload, donc je sais que l'image a été chargé. Je suis en utilisant des images de grande taille (c'est à dire beaucoup de mémoire), donc je préfère ne pas allouer de la mémoire pour une autre image.

Donc, j'ai écrit ma propre version de la fonction suffit simplement de définir la largeur et la hauteur de l'image à "auto" pour l'instant, tout en nous vérifions les dimensions naturelles, puis de restaurer les dimensions d'origine.

Voici ma fonction dans le cas où il permet à toute personne:

    function getImageSize(img) {
        var oWidth = img.width();
        var oHeight = img.height();

        img.css('width', 'auto');
        img.css('height', 'auto');

        var rVal = new Object();
        rVal.width = img.width();
        rVal.height = img.height();

        alert ('The image size is '+rVal.width+'x'+rVal.height);

        img.css('width', oWidth);
        img.css('height', oHeight);

        return rVal;
    }