En el post de hoy vamos a programar con JavaScript del lado del cliente para obtener el tamaño original de una imagen, es decir, su alto y ancho originales.

Podemos hacer esto con una imagen existente (etiqueta img) o con una creada a partir de la clase Image. Te mostraré un ejemplo de cómo hacerlo a partir de una imagen seleccionada en un input tipo file.

Creando imagen a partir de input

Vamos a ver cómo tomar un File de un input type file, crear una URL y asignar esa URL a la imagen, así:

const $fileInput = document.querySelector("#fileInput");
$fileInput.addEventListener("change", () => {
    const files = $fileInput.files;
    if (files.length <= 0) {
        return;
    }
    const firstFile = files[0];
    const image = new Image();
    const objectUrl = URL.createObjectURL(firstFile)
    image.onload = () => {
        const alto = image.naturalHeight;
        const ancho = image.naturalWidth;
        console.log({ alto, ancho });
        URL.revokeObjectURL(objectUrl);
    }
    image.src = objectUrl;

En este caso estoy obteniendo el alto y ancho de la imagen en el evento change del input, es decir, tan pronto el usuario elige una imagen de su dispositivo.

Creamos la URL con URL.createObjectURL y esperamos el evento load de la imagen, ya que ahí es donde podemos acceder a su verdadero tamaño accediendo a naturalHeight y naturalWidth. En el código JS de ejemplo solo estoy imprimiendo los valores, pero puedes usarlos de la manera que prefieras.

Con este método podemos obtener el verdadero width y height de una imagen, ya sea de un input o una imagen en el documento. Veamos a continuación otro ejemplo.

Tamaño real de imagen HTML

Ahora te voy a enseñar el código para obtener el alto y ancho de una img de HTML previamente cargada, a la que vamos a obtener referencia con document.querySelector.

Tenemos la imagen HTML:

<img id="staticImage" src="code.png" alt="Example image" style="max-width: 100%;">

Luego obtenemos una referencia a la misma, esperamos a que cargue y accedemos a su ancho y alto:

const $staticImage = document.querySelector("#staticImage");
$staticImage.onload = () => {
    console.log("Static image: ");
    const height = $staticImage.naturalHeight;
    const width = $staticImage.naturalWidth;
    console.log({ height, width });
};

Es importante que accedas a esta propiedad una vez que la imagen ha cargado. De este modo podrás acceder a la verdadera resolución de la imagen con JavaScript en el navegador web, sin importar los estilos CSS o tamaño de pantalla.

Código completo y demostración

A lo largo de este artículo te enseñé los fragmentos de código más importantes. Si quieres puedes ver el código completo en GitHub o visitar la demostración (no olvides abrir la consola de depuración).