Conocer las dimensiones originales de una imagen

En este momento estás viendo Conocer las dimensiones originales de una imagen
  • Autor de la entrada:
  • Categoría de la entrada:Javascript
  • Tiempo de lectura:2 minutos de lectura
Twittear
Compartir
Compartir
0 Compartir

Las propiedades naturalWidth y naturalHeight permiten obtener la anchura y altura, respectivamente, de una imagen.

Por ejemplo, supongamos que tenemos una imagen cuya anchura es de 800px y la altura es de 850px, pero sus dimensiones han sido modificadas utilizando CSS, de tal manera que en la ventana del navegador la imagen se muestra con un tamaño de 500px de ancho y 500px de alto.

Para extraer las dimensiones originales tan sólo debemos utilizar las propiedades naturalWidth y naturalHeight:

<p>En la imagen de abajo tiene una anchura y altura de 300px. Pulsa sobre el botón para obtener sus dimensiones originales.</p>
<img id="myImg" src="https://picsum.photos/id/0/800/850" alt="La imagen contiene una laptop y un escritorio">
<br><br>
<button onclick="myFunction()">Obtener tamaño original</button>
<p id="demo"></p>
<p id="demo1"></p>

Y el código JavaScript:

function myFunction() {
  var a = document.getElementById("myImg").naturalWidth;
  document.getElementById("demo").innerHTML = "La anchura original de la imagen es de " + a +"px.";  
  var b = document.getElementById("myImg").naturalHeight;
  document.getElementById("demo1").innerHTML = "La altura original de la imagen es de " + b +"px.";  
}

Código completo:

See the Pen Obtener las dimensiones originales de una imagen con JavaScript by simplicitytree (@simplicitytree) on CodePen.

Artículos Relacionados
Bucles For, while y do…while en JavaScript
Introducción a los Eventos Táctiles de JavaScript
Diferencia entre null y undefined en JavaScript
Orlando José-Rivera
Últimas entradas de Orlando José-Rivera (ver todo)

Deja una respuesta