Comment déterminer les dimensions de l'image originale malgré le redimensionnement du navigateur ?

Détermination multi-navigateurs des dimensions de l'image d'origine

La détermination de la taille d'origine d'une image qui a été redimensionnée côté client peut être un défi en raison d’incohérences du navigateur. Cependant, il existe quelques options fiables et indépendantes du framework que vous pouvez envisager :

Option 1 : Supprimer les attributs et les décalages de lecture

Supprimer les attributs de largeur et de hauteur de la balise d’image. Cela vous permet de lire les propriétés offsetWidth et offsetHeight pour obtenir les dimensions physiques réelles de l'image.

Option 2 : Créer un objet image JavaScript

Créer un objet image JavaScript et définissez son attribut src sur la source de l'image. Ensuite, lisez les propriétés de largeur et de hauteur de l’objet. Vous n'avez pas besoin d'ajouter l'image à la page pour que cette méthode fonctionne. Voici un exemple de fonction :

<code class="html">function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc;
}</code>

Remarque : Comme mentionné dans les commentaires, il est important d'exécuter la fonction sur l'événement onload de l'image pour s'assurer que l'image est complètement chargée avant j'essaie de lire ses dimensions.

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!