Comment puis-je obtenir avec précision les dimensions de l'image dans les navigateurs WebKit ?

Récupération précise des dimensions d'une image dans les navigateurs Webkit

Mesurer les dimensions réelles d'une image peut s'avérer difficile dans les navigateurs Webkit tels que Safari et Chrome. Les méthodes traditionnelles telles que la suppression des attributs de largeur et de hauteur en ligne et la mesure des dimensions réelles de l'image ne tiennent pas compte des dimensions définies par ces navigateurs après le chargement de l'image.

Exploiter l'événement de chargement de l'image

Au lieu de s'appuyer sur des délais d'attente, une approche plus fiable consiste à utiliser l'événement onload de l'image. Cela vous permet de capturer les dimensions une fois l'image entièrement chargée :

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.
    });

Exploiter les attributs NaturalHeight et NaturalWidth

Les navigateurs modernes prennent en charge les attributs HTML5 naturalHeight et naturalWidth, qui fournissent les vraies dimensions d'une image quel que soit le CSS. Cette approche est plus concise :

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

En utilisant ces techniques, vous pouvez récupérer avec précision la largeur et la hauteur réelles des images dans les navigateurs Webkit, permettant une manipulation et un affichage plus précis des images.

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!