lunedì 12 ottobre 2009

ASP.NET : Inserire immagini dinamiche all’interno delle pagine ASPX.

A volte abbiamo la necessità di inserire, all’interno delle nostre pagine web .ASPX, delle immagini generate in maniera dinamica, cioè create utilizzando un opportuno algoritmo oppure modificando dinamicamente delle immagini già esistenti.

Una delle tecniche che possiamo utilizzare per ottenere questo risultato è quella di utilizzare dei gestori HTTP personalizzati.

Un gestore HTTP altro non è che una classe .NET che implementa l’interfaccia IHttpHandler e che permette di gestire, personalizzando il comportamento, un qualsiasi file con una qualsiasi estensione.

Esistono, fondamentalmente due tipologie di gestori HTTP:

1) Il primo tipo è quello che si ottiene creando una classe VB.NET (o C#) ed implementando l''interfaccia IHttpHandler. L’utilizzo di questo gestore avviene inserendo un’apposita chiave all’interno del file web.config:

<system.webServer>
    .
    .
    <handlers>
        <add name="MioGestore" verb="*" path="*.mext" type="MiaClasse"/>
    </handlers>
    .
    .
</system.webServer>

Il tag <add> comunica al framework ASP.NET di richiamare la classe MioGestore nel momento in cui viene richiesto un file con estensione *mext.

2) il secondo tipo di gestori è quello che si ottiene aggiungendo un elemento “gestore generico” dal menù di visual studio:

Finestra per l'aggiunta di un gestore generico.  Questa tipologia di gestore è più adatto ad essere richiamato all’interno di una pagina ASPX in quanto si comporta come una pagina ASPX stessa.

In entrambi i casi, l’interfaccia IHttpHandler prevede un metodo e una proprietà.

Il metodo ProcessRequest() viene richiamato ogni volta che il framework deve effettivamente eseguire l’elaborazione della richiesta tramite il gestore ed è il punto in cui inserire il nostro algoritmo di generazione dell’immagine.

La proprietà IsReusable() indica al framework se l’istanza del gestore può essere riutilizzata per un’altra richiesta o se deve essere creata una nuova istanza ad ogni richiesta.

tornando al problema di inserire delle immagini dinamiche all’interno delle nostre pagine web, supponiamo di voler inserire, automaticamente, un watermark all’interno delle immagini che visualizziamo nel sito in modo che non si possano utilizzare.

Per fare questo, o modifichiamo a mano tutte le immagini inserendo un watermark opure creiamo un gestore WatermarkImageHandler.ashx che utilizzeremo come attributo src dei tag <img> in cui vogliamo far apparire il watermark.

In sostanza, una volta creato il gestore generico WatermarkImageHandler.ashx  è sufficiente implementare l’algoritmo di creazione del watermark all’interno del metodo ProcessRequest().

Public Sub ProcessRequest(ByVal context As System.Web.HttpContext)
    Implements System.Web.IHttpHandler.ProcessRequest
    context.Response.ContentType = "image/jpg"
    If Not String.IsNullOrEmpty(ImagePath) Then
        Dim imageFullPath = HttpContext.Current.Server.MapPath(ImagePath)
        Dim image As New Bitmap(imageFullPath)
        Dim gr = Graphics.FromImage(image)
        Dim watermarkFont = New Font(FontFamily.GenericMonospace, _
            10, FontStyle.Regular, GraphicsUnit.Pixel)
        Dim textSize = gr.MeasureString(Watermark, watermarkFont)
        Dim x = 0
        While x < image.Width
            Dim y = 0
            While y < image.Height
                gr.DrawString(Watermark, watermarkFont, Brushes.White, x, y)
                y += 3 / 2 * textSize.Height
            End While
            x += 3 / 2 * textSize.Width
        End While
        image.Save(context.Response.OutputStream, ImageFormat.Jpeg)
    End If
End Sub

Il trucco di tutto il meccanismo è quello di cambiare il ContentType della Response (accessibile tramite l’argomento HttpContext passato alla subroutine) impostandolo come “image/jpg” (o “image/gif” o “image/png” in base alla tipologia di immagine).

A questo punto è sufficiente creare un oggetto Bitmap utilizzando le classi a disposizione nel namespace System.Drawing e modificarlo a nostro piacimento per generare l’immagine che desideriamo.

Infine basta salvare l’immagine generata all’interno dell’OutputStream della Response (con l’opportuno formato) ed il gioco è fatto.

Nel codice riportato sopra, Watermark e ImagePath sono due proprietà di sola lettura che wrappano i valori passati in query string:

Public ReadOnly Property Watermark() As String
    Get
        Return HttpContext.Current.Request.QueryString("watermark")
    End Get
End Property

Public ReadOnly Property ImagePath() As String
    Get
        Return HttpContext.Current.Request.QueryString("imagepath")
    End Get
End Property

Una volta creato il nostro gestore, possiamo utilizzarlo, all’interno di una pagina aspx semplicemente scrivendo:

<img src="./WatermarkImageHandler.ashx?watermark=codetailor&imagepath=./images/001.jpg" />

In questo caso il watermark impresso sull’immagine sarà “codetailor” mentre l’immagine da utilizzare è la “./images/001.jpg”. Il risultato ottenuto è il seguente:

La pagina web con l'immagine e il watermark.

La tecnica appena vista può essere, ovviamente, utilizzata per creare immagini ex-novo (ad esempio grafici con i dati letti da un dispositivo esterno di misura) oppure cambiare il formato di un’immagine esistente (giocando con il ContentType della Response e con il tipo di immagine nel metodo Save della classe Bitmap).

 

Nessun commento: