3 formas de obtener el ancho y alto de imagen usando jQuery
How to get image size (height & width) using JavaScript
3 formas de obtener el ancho y alto de imagen usando jQuery. Se pueden obtener de varias formas y también con jQuery podemos averiguar el ancho y alto de una imagen usando las funciones width() y height().
Si deseamos saber el ancho y alto original de una imagen redimensionada en la etiqueta IMG y deseamos obtener las dimensiones originales para poder mostrar un mensaje indicando que calidad tiene dicha imagen.
3 formas de obtener el ancho y alto de imagen
- Primero detectar si tiene redimensión manual
- Eliminar la redimensión manual
- Aplicar la función para extraer la información original de las dimensiones de imagen, mediante el uso de alertas.
Ahora, pero que re-dimensionamos manualmente los atributos de la imagen de esta forma:
A) Usando jQuery
<img src="foto.jpg" width="733" height="722" id="foto" />
Sobre esta imagen si aplicamos directamente las funciones anteriores de jQuery nos darían «733» de ancho y «722» de alto.
<script>
$(window).load(function() {
var imagen = $('#mifoto');
imagen.removeAttr("width"); // Remover el atributo width
imagen.removeAttr("height"); // remover el atributo height
alert( imagen.width() ); // ancho original. Ej. 900
alert( imagen.height() ); // alto original. Ej: 500
});
</script>
Para averiguar el tamaño original de la imagen debemos de realizar estos pasos:
- Primero eliminamos los atributos (width, heitght) actuales de la imagen con la función removeAttr(),
- Segundo, aplicar ahora las funciones width() y height() y obtendremos el tamaño real de la imagen
B) Usando JavaScript
Otra forma de obtener las dimensiones de una determinada imagen es usando funciones tipicas de JavaScript. A continuacion, veamos un ejemplo de su uso.
<script type="text/javascript">
const img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
</script>
C) Usando Propiedades del DOM
Las propiedades DOM clientWidth y clientHeight son las que muestran el tamaño actual en el navegador de las dimensiones internas de un elemento DOM. Entonces, en el caso de un elemento IMG, esto obtendrá las dimensiones reales de la imagen.
var img = document.getElementById('imageid');
// consiges un control del IMG
var width = img.clientWidth;
var height = img.clientHeight;
Conclusión
En este articulo hemos aprendido a obtener las dimensiones (tamaño de imagen) de una imagen con el fin de mostrar un mensaje acerca de la imagen.
El uso que se le puede dar a estas funciones son múltiples, unas de ellas se podrían usar para detectar si la imagen es pequeña o grande en el cual si es pequeña podemos incorporar un mensaje indicando que esa imagen es de baja resolución.
Se usarían en galerías de imágenes, sistemas web, plataformas web, etc.
