Galería de Imágenes en Asp.Net

El cómo guardar, desplegar, cambiar el tamaño de una imagen en Asp.net es un tema común a tratar, basándonos en este punto, crearemos una galería básica  de imágenes, en la cual, mostraremos la manera de guardar y desplegar imágenes almacenadas ya sea en SQL Server o en una carpeta especificada para dicho fin.

Contenido

Arquitectura de la aplicación

Realizando la configuración de la aplicación.

Instanciando la clase correspondiente

Guardando las imágenes.

Arquitectura de la aplicación.

El Proyecto Web consta de los siguientes elementos.

VerImagen.aspx,	Esta página será nuestro punto de entrada a la aplicación y será la encargada de mostrar una lista de todas las imágenes que tenemos almacenadas, las imágenes mostradas estarán en un tamaño de 80 x 80 píxeles.
AgregarImagen.aspx	Proporciona el mecanismo necesario para subir la imagen deseada al servidor. Una vez que la imagen es procesada en el servidor, se llamara la función correspondiente para realizar la persistencia en el repositorio seleccionado.
VerImagen.aspx	Visualiza una imagen previa de mayor tamaño a la vista preliminar por default (320 x 240 píxeles), la imagen mostrada en está pagina será generada dinámicamente.
Imagen.aspx	La visualización de las imágenes es a través de ésta página, se modifica su ContentType a “image/jpg” para que en lugar de regresar el contenido como “text/html” sea como una imagen.

 

Por su parte, el proyecto de componentes consta de los siguientes elementos

Imagen	Clase abstracta que contiene la definición para Guardar, Obtener y Generar vistas preeliminares de las imágenes.
ImagenLocal	Clase concreta que implementa los métodos abstractos de Imagen la cual permite almacenar y obtener imágenes almacenadas en el servidor.
ImagenSql	Al igual que la clase ImagenLocal implementa los métodos de la clase abstracta Imagen, pero para almacenar y obtener las imágenes desde un servidor SQL Server.
FabricaImagen	Creara una clase que hereda de la clase abstracta Imagen, la creación de la clase  correspondiente (ImagenLocal o ImagenSql) será dependiendo del repositorio seleccionado

Realizando la configuración de la aplicación

Ya que la aplicación tendrá la posibilidad de persistir las imágenes tanto en Sql Server como físicamente  en el servidor, entonces será necesario definir ciertos parámetros, que, dependiendo del medio seleccionado estos serán utilizados por lo tanto, no todos son requeridos, estos parámetros serán almacenados dentro del archivo web.config.

TipoAlmacenamiento: Especifica el tipo de almacenamiento en el cual las imágenes serán persistidas (SqlServer o Local)

<!-- Si TipoAlmacenamiento=Local, las imágenes serán almacenadas físicamente en el servidor. Si TipoAlmacenamiento=SqlServer, las imágenes serán guardadas en un servidor  SQL Server--> <add key="TipoAlmacenamiento" value="Local" /> <!--<add key="TipoAlmacenamiento" value="SqlServer"/>       -->

En caso de que el tipo de almacenamiento sea “Local” las siguientes claves deben ser configuradas

RutaImagenesLocal: Asigna la ruta en la cual las imágenes en tamaño original serán almacenadas

RutaImagenesPreeliminarLocal: Las imágenes preeliminares generadas dinámicamente serán almacenadas en la ruta aquí especificada.

RutaImagenesWebLocal: Especifica la URL en la cual podrán accederse directamente  las imágenes vía Web.

<!-- Configuración aplicable únicamente para TipoAlmacenamiento=Local-->            <add key="RutaImagenesLocal" value="c:\InetPub\wwwRoot\GaleriaCSharp\Imagenes\" /> <add key="RutaImagenesPreeliminarLocal" value="c:\InetPub\wwwRoot\GaleriaCSharp\Imagenes\Preeliminar\" /> <add key="RutaImagenesWebLocal" value="http://localhost/galeriacsharp/Imagenes/Preeliminar" />

Si el medio seleccionado es SqlServer entonces la única configuración que tiene que ser asignada será la clave ConString, ésta contendrá la cadena de conexión a nuestro  servidor SQL Server.

<!-- Configuración aplicable únicamente para TipoAlmacenamiento=SqlServer--> <add key="ConString" value="server=(local);User Id=sa;Password=tupassword;database=imagenes" />

 

Instanciando la clase correspondiente

Dado que utilizaremos dos clases que heredan de la clase Imagen y por lo tanto, exponen la misma funcionalidad, la clase encargada de realizar la creación de la clase ImagenLocal o ImagenSql será FabricaImagen, al invocar el método FabricaImagen.CreaClaseImagen se tomara  la clave “TipoAlmacenamiento” del archivo web.config mediante el cual se tomara la decisión de cual clase  crear y retornar

Para que se pueda regresar la clase creada, debe realizarse un  cast al tipo “Imagen”, la cual, como veíamos anteriormente, expone toda la funcionalidad necesaria para el manejo de las imágenes.

 

/// <summary> /// Crea una clase del tipo <see cref="GaleriaCSharpCore.Imagen"/> a partir del tipo de almacenamiento configurado /// </summary> /// <returns>Una clase que hereda de <see cref="GaleriaCSharpCore.Imagen"/></returns> public static GaleriaCSharpCore.Imagen CreaClaseImagen() {       //Obtiene el tipo de almacenamiento (Local,SqlServer)       string Almacenamiento = ConfigurationSettings.AppSettings["TipoAlmacenamiento"];       Imagen img = null;      //Se declara la clase abstracta Imagen       switch (Almacenamiento)       {             case "Local":                                               img = (Imagen) new ImagenLocal();                   break;             case "SqlServer":                                           img = (Imagen) new ImagenSql();                   break;       }         return img; }

En el código anterior, vemos como  la clase concreta es creada, aun cuando la clase con la que estaremos trabajando será “Imagen”, ésta, al ser una  clase abstracta no puede ser instancia directamente.

//Se llama a la fábrica para crear una clase del tipo correspondiente. GaleriaCSharpCore.Imagen imgClass = FabricaImagen.CreaClaseImagen();

 

Guardando las imágenes.

La página Web “AgregarImagen.aspx” contiene un formulario para cargar la imagen en el servidor utilizando un control HtmlInputFile, la única validación que realiza la página es validar que el tipo de imagen sea en formato JPEG, ésta validación puede realizarse de dos maneras, la primera sería validando el ContentType fuera igual a “image/jpeg, la segunda es validando únicamente la extensión del archivo.

El zip contiene el código (está explicado) y la base de datos en sql 2000, pero si tienen alguna duda, pónganse en contacto conmigo en la dirección de correo especificada al inicio del articulo.

 

---

Espacios de nombres usados en el código de este artículo:

System.IO
System.Drawing
 

Fichero con el código de ejemplo: neo_mx_GaleriaImagenesCsharp.zip - Tamaño 195 KB