Pregunta ¿Cómo obtener el tamaño de la imagen (alto y ancho) usando JavaScript?


¿Hay alguna jQuery o API o métodos JS puros para obtener las dimensiones de una imagen en la página?


511
2018-03-08 06:41


origen


Respuestas:


clientWidth y clienteAltura son propiedades DOM que muestran el tamaño actual dentro del navegador de las dimensiones internas de un elemento DOM (excluyendo margen y borde). Entonces, en el caso de un elemento IMG, obtendrá las dimensiones reales de la imagen visible.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

384
2018-03-08 06:45



Puede obtener la imagen mediante programación y verificar las dimensiones con Javascript ...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Esto puede ser útil si la imagen no es parte del marcado.


678
2018-03-09 14:44



Además (además de las respuestas de Rex e Ian) hay:

imageElement.naturalHeight

y

imageElement.naturalWidth

Estos proporcionan la altura y el ancho del archivo de imagen en sí (en lugar de solo el elemento de la imagen).


245
2018-03-08 07:22



Si está utilizando jQuery y está solicitando tamaños de imagen, tiene que esperar hasta que se carguen o solo obtendrá ceros.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

105
2018-03-01 21:38



Creo que una actualización de estas respuestas es útil porque una de las respuestas mejor votadas sugiere el uso de clientWidth y customerHeight, que creo que ahora está obsoleto.

He realizado algunos experimentos con HTML5 para ver qué valores realmente se devuelven.

Antes que nada, utilicé un programa llamado Dash para obtener una visión general de la API de imagen. Se afirma que height y width son la altura / ancho representados de la imagen y eso naturalHeight y naturalWidth son el alto / ancho intrínseco de la imagen (y solo son HTML5).

Utilicé una imagen de una hermosa mariposa, desde un archivo con una altura de 300 y un ancho de 400. Y este Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Luego usé este HTML, con CSS en línea para la altura y el ancho.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Resultados:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Luego cambié el HTML a lo siguiente:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

es decir, usar atributos de altura y ancho en lugar de estilos en línea

Resultados:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

Luego cambié el HTML a lo siguiente:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

es decir, utilizando ambos atributos y CSS, para ver cuál tiene prioridad.

Resultados:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

88
2018-06-13 14:36



Usando JQuery haces esto:

var imgWidth = $("#imgIDWhatever").width();

62
2018-03-08 06:45



Lo que todos los demás han olvidado es que no puedes verificar el tamaño de la imagen antes de que se cargue. Cuando el autor comprueba todos los métodos publicados, probablemente solo funcionará en localhost. Como jQuery se puede usar aquí, recuerde que el evento 'listo' se dispara antes de que se carguen las imágenes. $ ('# xxx'). width () y .height () deberían activarse en onload event o later.


26
2018-03-08 16:53



Solo puede hacer esto usando una devolución de llamada del evento de carga ya que el tamaño de la imagen no se conoce hasta que no se haya terminado de cargar. Algo como el siguiente código ...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

18
2017-08-04 11:50