Obtenir la largeur et la hauteur réelles d'une image avec JavaScript ? (dans Safari/Chrome)

Question

Je suis en train de créer un plugin jQuery.

Comment obtenir la largeur et la hauteur réelles de l'image avec Javascript dans Safari ?

Ce qui suit fonctionne avec Firefox 3, IE7 et Opera 9 :

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

Mais dans les navigateurs Webkit comme Safari et Google Chrome, les valeurs sont de 0.

Answer 1

Les navigateurs Webkit définissent les propriétés hauteur et largeur après le chargement de l'image. Au lieu d'utiliser des délais d'attente, je vous recommande d'utiliser l'événement onload d'une image. Voici un exemple rapide :

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Pour éviter les effets que CSS pourrait avoir sur les dimensions de l'image, le code ci-dessus fait une copie en mémoire de l'image. Il s'agit d'une solution très astucieuse suggérée par FDisk .

Vous pouvez également utiliser le naturalHeight et naturalWidth Attributs HTML5.

Answer 2

Utilisez le naturalHeight et naturalWidth attributs de HTML5 .

Par exemple :

var h = document.querySelector('img').naturalHeight;

Fonctionne dans IE9+, Chrome, Firefox, Safari et Opera ( stats ).

Answer 3

function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;
}

Vous n'avez pas besoin de supprimer le style des attributs image ou dimensions de l'image. Il suffit de créer un élément avec javascript et de récupérer la largeur de l'objet créé.

Answer 4

Il y a beaucoup de discussion dans la réponse acceptée à propos d'un problème où le onload ne se déclenche pas si une image est chargée depuis le cache de WebKit.

Dans mon cas, onload se déclenche pour les images mises en cache, mais la hauteur et la largeur sont toujours de 0. Un simple setTimeout a résolu le problème pour moi :

$("img").one("load", function(){
    var img = this;
    setTimeout(function(){
        // do something based on img.width and/or img.height
    }, 0);
});

Je ne peux pas dire pourquoi le onload se déclenche même lorsque l'image est chargée à partir de la mémoire cache (amélioration de jQuery 1.4/1.5 ?) - mais si vous rencontrez toujours ce problème, peut-être qu'une combinaison de ma réponse et de l'événement var src = img.src; img.src = ""; img.src = src; Cette technique fonctionnera.

(Notez que pour mes besoins, je ne suis pas concerné par les dimensions prédéfinies, que ce soit dans les attributs de l'image ou dans les styles CSS - mais vous pourriez vouloir les supprimer, conformément à la réponse de Xavi. Ou cloner l'image).

Answer 5

Le problème de base est que les navigateurs WebKit (Safari et Chrome) chargent les informations JavaScript et CSS en parallèle. Ainsi, JavaScript peut s'exécuter avant que les effets de style de CSS aient été calculés, renvoyant une réponse erronée. En jQuery, j'ai trouvé que la solution est d'attendre que document.readyState == 'complete', par exemple,

jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  } 
  ... (rest of function) 

En ce qui concerne la largeur et la hauteur... selon ce que vous faites, vous pouvez vouloir un offsetWidth et un offsetHeight, qui incluent des éléments tels que les bordures et le rembourrage.