Comment obtenir avec précision les dimensions d'une image réelle dans les navigateurs WebKit ?

Récupération des dimensions d'une image réelle dans les navigateurs WebKit

Tentative de déterminer la largeur et la hauteur réelles d'une image à l'aide de JavaScript dans les navigateurs WebKit, tels que Safari ou Chrome génèrent souvent des valeurs nulles. En effet, WebKit ne met à jour ces propriétés qu'une fois l'image complètement chargée.

Pour surmonter cette limitation, nous vous recommandons d'utiliser l'événement onload de l'image au lieu des délais d'attente. Cette approche nous permet de récupérer les dimensions réelles avec plus de précision :

var img = $("img")[0]; // Retrieve the image element
var pic_real_width, pic_real_height;

$("<img/>") // Create an in-memory copy to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width; // Note: $(this).width() won't work for in-memory images.
        pic_real_height = this.height;
    });

Cette technique garantit que nous récupérons les dimensions réelles de l'image sans aucune interférence du style CSS.

Une autre option consiste à exploiter le Attributs HTML5 naturalHeight et naturalWidth. Ces attributs fournissent les dimensions intrinsèques et non stylisées de l'image, quelle que soit la manipulation CSS :

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

En implémentant ces méthodes, nous pouvons accéder avec précision aux vraies dimensions d'une image dans les navigateurs WebKit comme Safari et Chrome.

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!