Miniaturas de imágenes "al vuelo" con C# y ASP .NET

Algo que siempre resulta muy atractivo de incluir en una página web son las galerías de imágenes. Sin embargo, hay que tener cuidado con el tamaño de estas, ya que si son grandes pueden traducirse en tiempos de descarga muy lentos en incluso pueden consumir todo nuestro ancho de banda.

Lo más adecuado en estos casos es presentar los listados de imágenes con miniaturas (thumbnails), de manera que el visitante pueda navegar a través de la galería y descargar sólo las imágenes que le interesen.

En este artículo crearemos una página con ASP .NET que creará y nos devolverá una miniatura de la imagen "al vuelo", lo que nos evitará tener que guardar nuestras imágenes con diferentes tamaños y ayudará aumentar los tiempos de descarga de nuestras galerías.

Empezamos por el principio

En primer lugar, en nuestro proyecto Web ASP .NET C#, crearemos una nueva página .aspx a la que llamaremos Miniatura.aspx.

No vamos a necesitar nada de código html y toda la 'chicha' estará en el code-behind, así que dejaremos el fichero Miniatura.aspxúnicamente con la siguiente línea:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Miniatura.aspx.cs" Inherits="Miniatura" %>

El código

A continuación editaremos el fichero Miniatura.aspx.cs e incluiremos algunas líneas de código.

La página recibirá el parámetro "src" donde indicaremos el nombre de la imagen de la que queremos obtener una miniatura..

 1 private const string DIR_IMAGENES = "imagenes";
 2 private const int ANCHO_MAX = 100;
 3 private const int ALTO_MAX = 80;

 4 private bool ThumbnailCallback() {
 5 	return false;
 6 }

 7 protected void Page_Load(object sender, EventArgs e) {
 8    string rutaImg = Server.MapPath(DIR_IMAGENES + @"/" + Request["src"]);
 9    if (!System.IO.File.Exists(rutaImg)) {
10 	   Response.End();
11    } else {
12       System.Drawing.Image img = System.Drawing.Image.FromFile(rutaImg);
      
13       double factor = 0;
14       int nuevoAlto = 0, nuevoAncho = 0;
      
15       if (img.Height / ALTO_MAX >= img.Width / ANCHO_MAX) {
16       	factor = ALTO_MAX * 1.0 / img.Height;
17       } else {
18       	factor = ANCHO_MAX * 1.0 / img.Width;
19       }
20       nuevoAlto = (int)Math.Round(img.Height * factor);
21       nuevoAncho = (int)Math.Round(img.Width * factor);
      
22       System.Drawing.Image miniatura = img.GetThumbnailImage(nuevoAncho, nuevoAlto, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero);
      
23       Response.ContentType = "image/jpeg";
24       miniatura.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
25    }
26 }

¿Y eso qué hace exactamente?

Ahora explicaremos paso a paso lo que hace el código anterior:

• (línea 1) Indicamos el directorio donde están guardadas las imágenes.
• (líneas 2 y 3) Indicamos el ancho y la altura máximos que tendrán la miniatura que generaremos.
• (línea 4) Función callback (Necesaria para la llamada al método GetThumbnailImage.
• (línea 9) Comprobamos si existe el fichero solicitado a través del parámetro "src" en el directorio de imágenes.
• (línea 12) Obtenemos un objeto "Image" a partir de la imagen solicitada.
• (líneas 13 a 21) Hacemos algunos cálculos para obtener el nuevo alto y ancho de la miniatura sin pasarnos del alto y ancho máximos que habíamos configurado más arriba.
• (lína 22) ¡Generamos la miniatura!
• (línea 23) Cambiamos el content-type de la respuesta para indicar que se va a devolver una imagen en formato jpeg.
• (línea 24) Y por último, escribimos la imagen en el stream de salida con formato jpeg.

¿Y cómo se utiliza?

Ya tenemos nuestra aplicación de creación de miniaturas en formato aspx. Para comprobar que funciona, podemos escribir en nuestro navegador su URL seguida del fichero de imagen que queremos redimensionar (en el ejemplo miFoto.jpg) que tiene que estar dentro del directorio de imágenes que habíamos configurado antes.:

http://MiServidor/MiAplicacionWeb/Miniatura.aspx?src=miFoto.jpg

Finalmente, para incluir la imagen en una de nuestras páginas web, lo haríamos de la manera tradicional, pero indicando esta URL en el src en lugar de la ruta directa:

<img src="http://MiServidor/MiAplicacionWeb/Miniatura.aspx?src=miFoto.jpg" alt="Miniatura" />