Comment obtenir de manière fiable les dimensions de l'image dans les navigateurs WebKit ?

Détermination des dimensions de l'image dans les navigateurs Webkit

Lors du développement de plugins JavaScript, il est crucial d'obtenir la largeur et la hauteur réelles d'une image. Alors que les méthodes conventionnelles fonctionnent dans Firefox, IE et Opera, elles échouent dans Safari et Chrome, où les valeurs renvoyées sont nulles.

Comportement de chargement d'image unique de WebKit

Contrairement à Dans d'autres navigateurs, Webkit définit les propriétés de hauteur et de largeur d'une image uniquement après son chargement. Ce comportement nécessite une approche différente pour récupérer les véritables dimensions de l'image.

利用图片加载事件

La solution recommandée implique l'utilisation de l'événement onload d'une image. Vous trouverez ci-dessous un extrait de code modifié qui résout le problème :

var img = $("img")[0]; // Get the image element
var pic_real_width, pic_real_height;
$("<img/>") // Create an in-memory copy to avoid CSS issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

Éviter les effets CSS

Pour éviter que les effets CSS n'affectent les dimensions, le code crée un copie mémoire de l'image. Cette technique garantit que les valeurs récupérées reflètent avec précision la taille réelle de l'image.

Approche alternative : Attributs HTML5

HTML5 fournit les attributs naturalHeight et naturalWidth, qui peuvent également être utilisés. pour récupérer les dimensions réelles de l'image. Cependant, la prise en charge de ces attributs varie selon les navigateurs.

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!