Javascript - Get Image height

Question

Necesito mostrar un montón de imágenes en una página web usando AJAX. Todos ellos tienen diferentes dimensiones, por lo que quiero ajustar su tamaño antes de mostrarlos. ¿Hay alguna forma de hacer esto en JavaScript?

El uso de getimagesize() de PHP para cada imagen provoca un golpe de rendimiento innecesario ya que habrá muchas imágenes.

Answer 1

¿Desea ajustar las imágenes, o solo la forma en que se muestran? Si lo primero, quieres algo del lado del servidor. Si es lo último, solo necesita cambiar image.height e image.width.

Answer 2

... pero ... ¿no sería mejor ajustar el tamaño de la imagen en el servidor en lugar de transmitir los bytes al navegador y hacerlo allí?

Cuando digo ajustar el tamaño de la imagen, no me refiero a establecer el alto y el ancho en la etiqueta de la imagen HTML. Si lo hace, todavía está enviando una gran cantidad de bytes de servidor a cliente. Quiero decir, en realidad manipular la imagen en sí misma del lado del servidor.

tengo .NET C# código aquí que lleva ese enfoque, pero tiene que haber una manera de php para hacerlo también: http://ifdefined.com/www/gallery.html

Además, al hacerlo del lado del servidor, que abre la posibilidad de hacer el ajuste solo una vez y luego guardando la imagen ajustada, que sería muy rápido.

Answer 3

Bueno ... hay varias formas de interpretar esta pregunta.

La primera y la forma en que creo que se refiere es simplemente modificar el tamaño de la pantalla para que todas las imágenes muestren el mismo tamaño. Para esto, realmente usaría CSS y no JavaScript. Simplemente cree una clase que tenga los valores adecuados de ancho y alto establecidos, y haga que todas las etiquetas <img> usen esta clase.

Una segunda forma es que desea conservar la relación de aspecto de todas las imágenes, pero escalar el tamaño de visualización a un valor razonable. Hay una forma de acceder a esto en JavaScript, pero necesitaré un poco para escribir una muestra de código rápido.

La tercera forma, y ​​espero que no se refiera a esto, es alterar el tamaño real de la imagen. Esto es algo que tendrías que hacer por el lado del servidor, ya que no solo JavaScript no puede crear imágenes, sino que no tendría ningún sentido, ya que la imagen de tamaño completo ya ha sido enviada.

Answer 4

Prueba esto:

var curHeight; 
var curWidth; 

function getImgSize(imgSrc) 
{ 
var newImg = new Image(); 
newImg.src = imgSrc; 
curHeight = newImg.height; 
curWidth = newImg.width; 

} 

Answer 5

Vale la pena señalar que en Firefox 3 y Safari, cambiar el tamaño de una imagen con sólo cambiar la altura y el ancho no se ve tan mal. En otros navegadores, puede parecer muy ruidoso porque usa el remuestreo del vecino más cercano. Por supuesto, está pagando para mostrar una imagen más grande, pero eso podría no ser importante.

Answer 6

Mi solución preferida para esto sería hacer el ajuste de tamaño del lado del servidor, por lo que está transmitiendo menos datos innecesarios.

Si tiene que hacerlo del lado del cliente, sin embargo, y la necesidad de mantener la relación de la imagen, se puede utilizar el siguiente:

var image_from_ajax = new Image(); 
image_from_ajax.src = fetch_image_from_ajax(); // Downloaded via ajax call? 

image_from_ajax = rescaleImage(image_from_ajax); 

// Rescale the given image to a max of max_height and max_width 
function rescaleImage(image_name) 
{ 
    var max_height = 100; 
    var max_width = 100; 

    var height = image_name.height; 
    var width = image_name.width; 
    var ratio = height/width; 

    // If height or width are too large, they need to be scaled down 
    // Multiply height and width by the same value to keep ratio constant 
    if(height > max_height) 
    { 
     ratio = max_height/height; 
     height = height * ratio; 
     width = width * ratio; 
    } 

    if(width > max_width) 
    { 
     ratio = max_width/width; 
     height = height * ratio; 
     width = width * ratio; 
    } 

    image_name.width = width; 
    image_name.height = height; 
    return image_name; 
} 

Answer 7

yo estaba buscando una solución para conseguir la altura y la anchura de una imagen usando JavaScript. Encontré muchas, pero todas esas soluciones solo funcionaron cuando la imagen estaba presente en el caché del navegador.

Finalmente he encontrado una solución para obtener la altura y la anchura incluso si la imagen no existe en la caché del navegador:

<script type="text/javascript"> 

    var imgHeight; 
    var imgWidth; 

    function findHHandWW() { 
    imgHeight = this.height; 
    imgWidth = this.width; 
    return true; 
    } 

    function showImage(imgPath) { 
    var myImage = new Image(); 
    myImage.name = imgPath; 
    myImage.onload = findHHandWW; 
    myImage.src = imgPath; 
    } 
</script> 

Gracias,

Binod Suman

http://binodsuman.blogspot.com/2009/06/how-to-get-height-and-widht-of-image.html

Answer 8

Probar con JQuery:

<script type="text/javascript"> 
function jquery_get_width_height() 
{ 
    var imgWidth = $("#img").width(); 
    var imgHeight = $("#img").height(); 
    alert("JQuery -- " + "imgWidth: " + imgWidth + " - imgHeight: " + imgHeight); 
} 
</script> 

o

<script type="text/javascript"> 
function javascript_get_width_height() 
{ 
    var img = document.getElementById('img'); 
    alert("JavaSript -- " + "imgWidth: " + img.width + " - imgHeight: " + img.height); 
} 
</script> 

Answer 9

sólo tiene que cargar la imagen en un <img> etiqueta oculta (style = "display none"), escuchar el evento de carga de disparar con jQuery, crear un nuevo Image() con JavaScript, establecer la fuente de la imagen invisible, y obtener el tamaño como arriba.