Comment récupérer les dimensions de l'image originale sur plusieurs navigateurs ?

Récupération des dimensions d'image originales dans plusieurs navigateurs

Déterminer les dimensions physiques d'une image redimensionnée côté client peut être un défi dans différents navigateurs. Cependant, deux options fiables et indépendantes du framework sont disponibles :

Option 1 : Utiliser offsetWidth et offsetHeight

Supprimer les attributs width et height de l'élément image (< ;img> Ensuite, utilisez les propriétés offsetWidth et offsetHeight pour récupérer la largeur et la hauteur réelles de l'image redimensionnée :

<code class="javascript">const img = document.querySelector('img');

img.removeAttribute('width');
img.removeAttribute('height');

const width = img.offsetWidth;
const height = img.offsetHeight;</code>

Option 2 : Utiliser un objet image JavaScript

Créer un nouvel objet Image JavaScript, définissez son attribut src sur l'URL de l'image, puis utilisez les propriétés width et height pour récupérer les dimensions d'origine :

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

    newImg.onload = function() {
        const width = newImg.width;
        const height = newImg.height;

        // Do something with the dimensions...
    };

    newImg.src = imgSrc;
}</code>

Notez que dans cette option, l'image n'a pas à être ajouté à la page pour qu'elle se charge et que ses dimensions soient déterminées.

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!