Imagen thumbnail sin archivo temporal en ASP.NET
Hoy vamos a sacudir el polvo de este abandonado esporádicamente actualizado blog con un truquillo bastante interesante a la hora de mostrar una versión miniatura de una imagen en nuestra web.
Lo que en general hacíamos es crear la versión miniatura en memoria que indefectiblemente debe existir físicamente en disco para luego enlazarla con nuestro control <img> ó <asp:image>.
El tip consiste en en enlazar nuestro control de imagen contra un archivo del tipo “Generic Handler” (extensión “.ashx”). Básicamente nos permite responder una petición HTTP con un archivo distinto a la típica página conformada por HTML y en este caso, por supuesto, vamos a utilizarlo para responder la petición con nuestra imagen miniatura.
A mi parecer hay 2 problemas que evitamos con esto:
- Problemas de permisos sobre el subdirectorio y/o archivos temporales que creamos ya que estamos hablando del contexto web.
- También debemos buscar la forma de eliminar dicho archivo temporal en algún momento para que no se amontonen en cantidades astronómicas.
Antes ACLARO:
- En este ejemplo no se encripta la ruta de la imagen pasada como argumento al archivo ashx. Esto debería hacerse, ya que en el render HTML enviado al cliente se observa dicha ruta completa con un simple “View Source” en nuestro navegador favorito.
- Debemos agregar la referencia a System.Windows.Forms. Más adelante, en el código, verán que utilizo el método TextRenderer.DrawText para dibujar un string dentro de la imagen indicando que ha habido un error.
Ahora sí. Vamos a escribir una pagina de ejemplo donde se muestra 2 versiones de una misma imagen.
La primera (izquierda) muestra la imagen con sus dimensiones originales, en este caso 400 x 400 pixeles. La segunda versión de la imagen (derecha) una versión alternativa dimensionada a 200 x 200 pixeles. Así se verá …
Por lo tanto tendremos esta pagina donde se muestran las imágenes (en mi ejemplo ImagenSinTemp.aspx) y también tendremos el archivo correspondiente al handler que muestra la miniatura (en mi ejemplo HandlerImagenes.ashx)
El diseño del archivo principal (el que contiene las imágenes) queda de la siguiente manera:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ImagenSinTemp.aspx.vb" Inherits="Sitio20.ImagenSinTemp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Ejemplo miniaturistico</title> </head> <body> <form id="frmImagen" runat="server"> <table width="620" border="1"> <tr> <td align="center"> Esta es la imagen original<br /> (400 x 400)</td> <td align="center"> Replica mas pequeña<br /> (200 x 200)</td> </tr> <tr> <td align="center"> <asp:Image ID="imgOriginal" runat="server" ImageUrl="~/ejemplo.jpg" /></td> <td align="center"> <asp:Image ID="imgMiniatura" runat="server" ImageUrl="HandlerImagenes.ashx" /></td> </tr> </table> </form> </body> </html>
Su code-behind simplemente en este caso tengo el Load de la pagina que setea la propiedad ImagenUrl de la imagen que muestra la versión miniatura. Nótese que se setea tanto la ruta completa del archivo como las dimensiones que deseo que tenga.
Partial Public Class ImagenSinTemp Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load imgMiniatura.ImageUrl = "HandlerImagenes.ashx?" & _ "archivo=" & HttpUtility.UrlEncode("D:\Desarrollo\NET\Sitio20\Ejemplo.jpg") & _ "&ancho=200" & _ "&alto=200" End Sub End Class
Y a continuación el código correspondiente al handler de imagenes:
Imports System.Web Imports System.Web.Services Imports System.IO Imports System.Drawing Imports System.Drawing.Imaging Public Class HandlerImagenes Implements System.Web.IHttpHandler Private Const __ANCHO_DEFECTO As Integer = 200 Private Const __ALTO_DEFECTO As Integer = 200 ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest Dim sArchivo As String = String.Empty Dim iAncho As Integer = __ANCHO_DEFECTO Dim iAlto As Integer = __ALTO_DEFECTO context.Response.Clear() context.Response.ClearContent() If Not String.IsNullOrEmpty(context.Request("archivo")) Then If (File.Exists(context.Request("archivo"))) Then sArchivo = HttpUtility.UrlDecode(context.Request("archivo")) If Not String.IsNullOrEmpty(context.Request("ancho")) Then iAncho = context.Request("ancho") Else ResponderError(context, "No se ha especificado ancho", iAlto, iAncho) End If If Not String.IsNullOrEmpty(context.Request("alto")) Then iAlto = context.Request("alto") Else ResponderError(context, "No se ha especificado alto", iAlto, iAncho) End If ReponderImagen(context, sArchivo, iAncho, iAlto) Else ResponderError(context, "El archivo especificado no existe", iAlto, iAncho) End If Else ResponderError(context, "No se ha indicado archivo", iAlto, iAncho) End If context.Response.End() End Sub Public Shared Sub ReponderImagen(ByVal pContexto As HttpContext, _ ByVal pArchivo As String, _ ByVal pAncho As Integer, _ ByVal pAlto As Integer) Dim bmpOut As System.Drawing.Bitmap = Nothing Dim tempStream As MemoryStream = New MemoryStream() Try Dim loBMP As New Bitmap(pArchivo) Dim loFormat As ImageFormat = loBMP.RawFormat Dim lnRatio As Decimal Dim lnNewWidth As Integer = 0 Dim lnNewHeight As Integer = 0 If loBMP.Width < pAncho AndAlso loBMP.Height < pAlto Then loBMP.Save(tempStream, bmpOut.RawFormat) Else If loBMP.Width > loBMP.Height Then lnRatio = CDec(pAncho) / loBMP.Width lnNewWidth = pAncho Dim lnTemp As Decimal = loBMP.Height * lnRatio lnNewHeight = CInt(Math.Truncate(lnTemp)) Else lnRatio = CDec(pAlto) / loBMP.Height lnNewHeight = pAlto Dim lnTemp As Decimal = loBMP.Width * lnRatio lnNewWidth = CInt(Math.Truncate(lnTemp)) End If bmpOut = New Bitmap(lnNewWidth, lnNewHeight) Dim g As Graphics = Graphics.FromImage(bmpOut) g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic g.FillRectangle(Brushes.White, 0, 0, lnNewWidth, lnNewHeight) g.DrawImage(loBMP, 0, 0, lnNewWidth, lnNewHeight) loBMP.Dispose() bmpOut.Save(tempStream, ImageFormat.Jpeg) pContexto.Response.ContentType = "image/jpg" pContexto.Response.BinaryWrite(tempStream.ToArray()) End If Catch ex As Exception ResponderError(pContexto, "Error al crear imagen: " & ex.Message, pAlto, pAncho) End Try End Sub Public Shared Sub ResponderError(ByVal pContexto As HttpContext, ByVal pTexto As String, ByVal pAlto As Integer, ByVal pAncho As Integer) Dim tempStream As MemoryStream = New MemoryStream() Dim bitmap As New Bitmap(pAlto, pAncho) Dim g As Graphics = Graphics.FromImage(bitmap) pContexto.Response.ClearContent() pContexto.Response.ContentType = "image/jpg" g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.None g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit g.Clear(Color.White) System.Windows.Forms.TextRenderer.DrawText(g, pTexto, _ New Font("Tahoma", 14, FontStyle.Regular, GraphicsUnit.Pixel), New Point(0, 0), _ Color.Black) bitmap.Save(tempStream, ImageFormat.Jpeg) pContexto.Response.BinaryWrite(tempStream.ToArray) End Sub End Class
La propiedad IsReausable y el método ProcessRequest corresponden a la implementación de la interfaz IHttpHandler.
El bastante simple. En ProcessRequest se analizan los parámetros recibidos devolviendo la imagen con la cadena que indica el error donde corresponde y en caso de estar todo correcto el método ReponderImagen es quien se encarga de crear la imagen miniatura.
Queda a criterio de ustedes personalizar cómo se muestra el mensaje de error acorde a sus propias necesidades.
Saludos!
