Cómo obtener dimensiones de imagen en JavaScript

A menudo encontramos situaciones en las que queremos ajustar el tamaño de las imágenes para la estructura y ajuste adecuados del modelo de objeto de documento general (DOM) mientras probamos una página web o un sitio web. Por ejemplo, en el caso de ajustar el espacio para reservar para una imagen en particular, se carga. En tales casos, puede utilizar los diferentes métodos de JavaScript para obtener dimensiones de imagen en JavaScript.

Este artículo discutirá los métodos para obtener dimensiones de imagen en JavaScript.

Cómo obtener dimensiones de imagen en JavaScript?

Para obtener dimensiones de imagen en JavaScript, se pueden utilizar los siguientes enfoques:

• "ancho" y "altura" propiedades
• "documento.QuerySelector ()"Método y"al hacer clic" evento
• "addEventListener ()" método

Pasar por los métodos discutidos uno por uno!

Método 1: Obtener dimensiones de imagen en JavaScript usando propiedades de ancho y altura

El "altura" y "ancho"Las propiedades establecen la altura y el ancho del elemento especificado. Estas propiedades se pueden utilizar junto con una palabra clave que se refiere al objeto actual para obtener las dimensiones de la imagen.

Sintaxis

objeto.estilo.ancho

En la sintaxis dada, el ancho del objeto especificado se obtendrá.

objeto.estilo.altura

Aquí, la altura del objeto agregado se obtendrá.

Ejemplo

Primero, cree una instancia de instancia HTMLIMAGEELEMENT utilizando el constructor Image () y acceda a la imagen para acceder para las dimensiones especificando su ruta:

var dimensions = new Image ();
dimensiones.plantilla src = '.jpg ';

A continuación, aplique un evento de encendido de tal manera que cuando se carga la ventana, el "ancho" y el "altura"Propiedades junto con el objeto Acceda a la altura y el ancho de la imagen específica y la muestran a través de la alerta:

dimensiones.onload = function ()
alerta (esto.ancho + 'x' + esto.altura);

La salida correspondiente será la siguiente:

Método 2: Obtener dimensiones de imagen en JavaScript usando el documento.Método QuerySelector () y evento OnClick

El "documento.QuerySelector ()El método "obtiene el primer elemento que coincide con un selector CSS y el"al hacer clicEl evento ocurre cuando el usuario hace clic en un elemento. Estos métodos se pueden usar en combinación para acceder a la ruta de la imagen y obtener su dimensión en el clic del botón.

Sintaxis

documento.QuerySelector (selectores CSS)

Aquí, "Selectores CSS"Representa uno o más de un selectores CSS.

objeto.onClick = imgSize () myScript;

En la sintaxis anterior, "imgSize ()"Se refiere a la función que se invocará cuando un"al hacer clic"El evento se desencadena.

Ejemplo

En el siguiente ejemplo, crearemos un botón y le conectaremos un evento OnClick que invocará la función imgSize () cuando se active:

Obtener dimensiones de imagen

Ahora, especifique la ruta de la imagen en el "" etiqueta:

Después de eso, defina una función llamada "imgSize ()". En su definición, acceda a la imagen y obtenga su ancho y altura utilizando las propiedades de ancho y altura, respectivamente, como se discutió en el método anterior, y muestrelo en el cuadro de alerta:

función imgSize ()
dimensiones var = documento.QuerySelector ("#dim");
ancho var = dimensiones.ancho;
Var altura = dimensiones.altura;
alerta ("ancho original =" + ancho + "," + "original altura =" + altura);

Producción

Método 3: Obtener dimensiones de imagen en JavaScript usando el método addEventListener ()

El "addEventListener ()"El método adjunta un controlador de eventos a un documento. Este método se puede implementar para acceder al botón y la imagen creados y aplicar un evento de clic para obtener las dimensiones de la imagen al hacer clic en el botón.

Sintaxis

documento.addEventListener (haga clic, función)

En la sintaxis anterior, "hacer clic"Se refiere al evento especificado y"función"¿Es la función que se invocará, respectivamente.

Ejemplo

Primero, cree un botón y especifique la ruta de la imagen con una altura particular y valores de ancho:

Obtener dimensiones de imagen
= "tamaño">

---

estilo = "altura: 300px; ancho: 300px;"

Ahora, acceda al botón creado y la imagen específica utilizando el "documento.QuerySelector ()" método.

Luego, agregue el evento "hacer clic"Al botón y aplique las propiedades NaturalWidth y NaturalHeight para iniciar sesión el ancho y la altura originales de una imagen:

Sea btn = documento.QuerySelector ('botón');
Dejar dimensiones = documento.QuerySelector ('#size');
Deje img = documento.QuerySelector ('img');
btn.addEventListener ('click', () =>
dimensiones.inteText = 'altura: $ img.NaturalHeight ancho: $ img.NaturalWidth ';
);

Producción

Hemos explicado los métodos más simples para obtener dimensiones de imagen en JavaScript.

Conclusión

Para obtener dimensiones de imagen en JavaScript, utilice el "ancho" y "altura"Propiedades para crear un objeto y acceder al ancho y la altura de la imagen específica, respectivamente, el"documento.QuerySelector ()"Método y"al hacer clic"Evento para acceder a la ruta de la imagen y obtener su dimensión en el clic del botón o el"addEventListener ()Método para acceder al botón y la imagen creados y aplicar un evento de clic para obtener las dimensiones de la imagen correspondientes. Este blog explicó los métodos para obtener dimensiones de imagen en JavaScript.