Comment obtenir des dimensions d'image en javascript

Nous rencontrons souvent des situations où nous voulons ajuster la taille des images pour la structure appropriée et l'ajustement du modèle d'objet de document global (DOM) tout en testant une page Web ou un site Web. Par exemple, dans le cas de l'ajustement de l'espace à réserver à une image particulière, il est chargé. Dans de tels cas, vous pouvez utiliser les différentes méthodes JavaScript pour obtenir des dimensions d'image en JavaScript.

Cet article discutera des méthodes pour obtenir des dimensions d'image en javascript.

Comment obtenir des dimensions d'image en javascript?

Pour obtenir des dimensions d'image en JavaScript, les approches suivantes peuvent être utilisées:

• "largeur" et "hauteur" propriétés
• "document.QuerySelector ()«Méthode et«sur clic" événement
• "addEventListener ()" méthode

Passer par les méthodes discutées une par une!

Méthode 1: Obtenez des dimensions d'image en JavaScript en utilisant les propriétés de largeur et de hauteur

Le "hauteur" et "largeur»Propriétés Définissez la hauteur et la largeur de l'élément spécifié. Ces propriétés peuvent être utilisées avec un mot-clé faisant référence à l'objet actuel pour obtenir les dimensions de l'image.

Syntaxe

objet.style.largeur

Dans la syntaxe donnée, la largeur de l'objet spécifié sera récupérée.

objet.style.hauteur

Ici, la hauteur de l'objet ajouté sera récupérée.

Exemple

Tout d'abord, créez une instance d'instance HTMLIMAGEElement à l'aide du constructeur Image () et accédez à l'image pour accéder pour les dimensions en spécifiant son chemin:

var dimensions = nouvelle image ();
dimensions.src = 'modèle.jpg ';

Ensuite, appliquez un événement Onload tel que lorsque la fenêtre se charge, le «largeur" et le "hauteur»Les propriétés ainsi que l'objet accèdent à la hauteur et à la largeur de l'image spécifique et affichez-la via alerte:

dimensions.onload = function ()
alerte (ceci.largeur + 'x' + ceci.hauteur);

La sortie correspondante sera la suivante:

Méthode 2: Obtenez des dimensions d'image en javascript à l'aide du document.Méthode QueySelector () et événement OnClick

Le "document.QuerySelector ()"La méthode obtient le premier élément qui correspond à un sélecteur CSS et le"sur clic»L'événement se produit lorsque l'utilisateur clique sur un élément. Ces méthodes peuvent être utilisées en combinaison pour accéder au chemin d'image et récupérer sa dimension sur le bouton cliquer.

Syntaxe

document.QueySelector (sélecteurs CSS)

Ici, "Sélecteurs CSS»Représente un ou plusieurs sélecteurs CSS.

objet.onClick = imgsize () myscript;

Dans la syntaxe ci-dessus, "imgsize ()»Fait référence à la fonction qui sera invoquée lorsqu'un«sur clic»L'événement est déclenché.

Exemple

Dans l'exemple suivant, nous créerons un bouton et y attacherons un événement onClick qui invoquera la fonction imgsize () lorsqu'elle sera déclenchée:

Obtenez des dimensions d'image

Maintenant, spécifiez le chemin de l'image dans le «" étiqueter:

Après cela, définissez une fonction nommée «imgsize ()". Dans sa définition, accédez à l'image et récupérez sa largeur et sa hauteur à l'aide des propriétés de largeur et de hauteur, respectivement, comme discuté dans la méthode précédente, et l'afficher dans la boîte d'alerte:

fonction imgsize ()
Var Dimensions = Document.queySelector ("# dim");
Var Largeur = Dimensions.largeur;
var hauteur = dimensions.hauteur;
alert ("oriental width =" + width + "," + "original height =" + height);

Sortir

Méthode 3: Obtenez des dimensions d'image en javascrip

Le "addEventListener ()»La méthode joint un gestionnaire d'événements à un document. Cette méthode peut être implémentée pour accéder au bouton créé et à l'image et appliquer un événement de clic pour obtenir les dimensions de l'image sur le bouton cliquer.

Syntaxe

document.addEventListener (cliquez, fonction)

Dans la syntaxe ci-dessus, "Cliquez sur»Fait référence à l'événement spécifié et«fonction«Est la fonction qui sera invoquée, respectivement.

Exemple

Tout d'abord, créez un bouton et spécifiez le chemin d'image avec une hauteur et une largeur particulières:

Obtenez des dimensions d'image
= "taille">

---

style = "hauteur: 300px; largeur: 300px;"

Maintenant, accédez au bouton créé et à l'image spécifique à l'aide de la «document.QuerySelector ()" méthode.

Ensuite, ajoutez l'événement "Cliquez sur”Au bouton et appliquez les propriétés de largeur naturelle et de naturel afin de déconnecter la largeur et la hauteur d'origine d'une image:

Laissez btn = document.queySelector ('bouton');
Laissez les dimensions = document.queySelector ('# size');
Laissez img = document.queySelector ('img');
btn.addEventListener ('click', () =>
dimensions.innerText = 'hauteur: $ img.Naturalheight Largeur: $ img.Naturalwidth ';
);

Sortir

Nous avons expliqué les méthodes les plus simples pour obtenir des dimensions d'image en javascript.

Conclusion

Pour obtenir des dimensions d'image en javascript, utilisez le «largeur" et "hauteur»Propriétés pour créer un objet et accéder à la largeur et à la hauteur de l'image spécifique, respectivement, le«document.QuerySelector ()«Méthode et«sur clic”Événement pour accéder au chemin d'image et obtenir sa dimension sur le bouton CLIC ou"addEventListener ()”Méthode pour accéder au bouton créé et à l'image et appliquer un événement de clic pour obtenir les dimensions d'image correspondantes. Ce blog a expliqué les méthodes pour obtenir des dimensions d'image en javascript.