Passa ai contenuti principali

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).

 

Commenti

Post popolari in questo blog

VB.NET for Dummies: Gli Eventi

Vorrei iniziare con questo post una serie dedicata ad aspetti di VB.NET di base che possono essere utile a coloro che si avvicinano al mondo .NET e che, in genere, non vengono trattati a livello base. La serie di post non ha la pretesa di essere assolutamente esaustivi sugli argomenti che tratterò In questo primo post parleremo degli eventi. Cosa sono e a cosa servono Un evento è la “notifica” dell’accadimento di qualcosa. Quando, ad esempio, premiamo un bottone della finestra di un’applicazione, dietro le quinte, il bottone stesso “notifica” al mondo circostante che qualcuno, in quell’istante, lo ha premuto. Sta, poi, al mondo circostante preoccuparsi di “intercettare” l’evento stesso per gestirlo (tramite un gestore di evento). Attenzione a non confondere la pressione del tasto con la “notifica” della pressione del tasto: l’evento è la “notifica” dell’accadimento, non l’accadimento stesso. Ma a cosa serve tutto ciò? Utilizzare gli eventi è un modo per disaccoppiare

VB.NET: SplashScreen con effetto fade-in

In questo post vorrei proporvi un modo per realizzare una splash screen per le nostre applicazioni Windows Form che appare progressivamente con un effetto fade. Supponiamo di avere il nostro progetto VB.NET in una soluzione Visual Studio 2008 in cui abbiamo il sorgente della nostra applicazione Windows Form. Inseriamo una splash screen utilizzando il menù Progetto->Aggiungi Nuovo Elemento e selezionando il tipo di elemento “Schermata Iniziale” A questo punto Visual Studio creerà, automaticamente, la schermata iniziale che possiamo personalizzare graficamente come vogliamo. Per poter fare in modo che questa finestra appaia nel momento in cui avviamo l’applicazione, è necessario aprire le proprietà del progetto e impostare la maschera di avvio: In questo modo, all’avvio dell’applicazione, la schermata appare immediatamente e scompare un attimo prima della visualizzazione della finestra dell’applicazione. Possiamo far apparire la schermata iniziale con un ef

Alla scoperta del Kinect: presentazioni e convenevoli

Oggi è arrivato un Kinect nuovo nuovo su cui cominciare a fare sperimentazione ed ho, quindi, deciso di condividere tutto ciò che scopro, le cavolate che faccio e i segreti che scopro con chi mi segue. I post che cercherò di scrivere con frequenza sono post di un neofita che si avvicina all’”Aggeggio” e che quindi sono diretti a chi nulla dell’argomento. Gli esperti troveranno noiosi e banali questi post, ma non si può aver tutto dalla vita. Per cominciare, scartato l’”Aggeggio” ho cominciato a preparare l’ambiente di sviluppo: 1) Visual Studio 2010 Ultimate (che uso normalmente ma che non è necessario in quanto si può sviluppare tranquillamente con la express edition); 2) Kinect SDK, scaricabile all’indirizzo http://research.microsoft.com/en-us/um/redmond/projects/kinectsdk/download.aspx 3) DirectX Software Development Kit scaricabile all’indirizzo http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=6812 A questo punto vi basta connettere il Kinect al