Comment récupérer avec précision les dimensions de l'image dans les navigateurs WebKit (Safari et Chrome) ?

Récupération des dimensions précises de l'image dans les navigateurs Webkit (Safari, Chrome)

Dans le domaine de la manipulation d'images Javascript, obtenir la largeur et la hauteur réelles d'une image peut poser des défis , en particulier dans les navigateurs Webkit comme Safari et Chrome.

Présentation du problème

Lors de l'utilisation de jQuery dans Firefox 3, IE7 et Opera 9, l'extrait de code suivant extrait efficacement les dimensions réelles de l'image :

var pic = $("img");
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();

Cependant, dans les navigateurs Webkit, cette approche donne des valeurs incorrectes de 0.

Solution : Événement de chargement d'image de Javascript

La solution réside dans l'exploitation de l'événement onload de l'élément image. Le code modifié ci-dessous accomplit cela :

var img = $("img")[0]; // Get the image element

$("<img/>") // Make a virtual copy of the image to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

En créant une copie mémoire de l'image et en utilisant le mot-clé this dans l'événement de chargement, nous contournons tous les effets CSS potentiels qui pourraient modifier les dimensions de l'image.

Alternative : attributs d'image HTML5

Pour la compatibilité avec les navigateurs HTML5, vous pouvez également exploiter naturalHeight et naturalWidth attributs :

var pic_real_width = img.naturalWidth;
var pic_real_height = img.naturalHeight;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!