javascript - example - jira rest api get all issues

Javascript-Obtener altura de la imagen

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() PHP para cada imagen provoca un golpe de rendimiento innecesario ya que habrá muchas imágenes.

Answer 1

¿Desea ajustar las imágenes por sí mismo 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 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.

Aquí tengo el código .NET C # que adopta ese enfoque, pero debe haber una forma de php para hacerlo también: http://ifdefined.com/www/gallery.html

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

Answer 3

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

La primera forma y la forma en que creo que te refieres 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 de esta manera, 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

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

Finalmente encontré una solución para obtener la altura y el ancho de la imagen, incluso si la imagen no existe en la memoria 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 5

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.

Sin embargo, si tiene que hacerlo desde el lado del cliente y necesita mantener la relación de imagen, puede usar lo 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 6

Prueba 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 7

Prueba esto:

var curHeight;
var curWidth;

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

}

Answer 8

Simplemente cargue la imagen en una etiqueta oculta <img> ( style = "display none" ), escuche el evento de carga disparando con jQuery, cree una nueva Image() con JavaScript, establezca la fuente en la imagen invisible y obtenga el tamaño como arriba.

Answer 9

Vale la pena señalar que en Firefox 3 y Safari, cambiar el tamaño de una imagen simplemente cambiando el alto 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.