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

MVP Reconnect …… ovvero quando entri nella “famigghia” resti sempre nella “famigghia”!!!

Ma di che “famigghia” stiamo parlando!!!!

Fermi tutti, non si tratta di robe strane o sette segrete o affari malavitosi….stiamo parlando della grande famiglia dei Microsoft MVP.

Per chi non sapesse cosa sono i Microsoft MVP, vi consiglio di fare un giro sul sito ufficiale del programma (link), ma, volendolo spiegare in pochisime parole, si tratta di un riconoscimento che Microsoft da a persone che si distinguono per il loro impegno, aiutando gli altri ad ottenere il massimo grazie alle tecnologie Microsoft. Si tratta di persone, non dipendenti Microsoft, che mettono la loro passione, il loro tempo, la loro buona volontà per la divulgazione e la condivisione della conoscenza. Non necessariamente (come qualcuno erroneamente sostiene, evidentemente non conoscendo le basi del programma) si tratta di professionisti nel termine letterale del termine ma si tratta comunque di un gruppo di persone che sacrifica un pò del suo tempo (e, a volte, vi assicuro neanche pò!!!) per la sua passione.

Pe…

Nuova versione del Band SDK

E’ di ieri l’annuncio del rilascio della nuova versione dell’SDK per il Microsoft Band.
Si tratta della versione 1.3.10417 (la precedente e, prima della serie, era la 1.3.10219 preview).
Maggiori informazioni, download dell’SDK per le tre piattaforme Windows Phone, iOS e Android all’indirizzo http://developer.microsoftband.com/.
Allo stesso indirizzo potrete trovare anche la documentazione.
Nei mesi scorsi mi sono gia’ occupato della precedente versione e questi sono i post che ne parlano:
Microsoft Band SDK Preview - First LookMicrosoft Band SDK Preview - ”Hello Band”Microsoft Band SDK Preview - Accesso ai sensoriMicrosoft Band SDK Preview - TileMicrosoft Band SDK Preview - NotificheMicrosoft Band SDK Preview - Personalizzazione
Gli argomenti trattati e il codice proposto dovrebbe, ad una prima lettura delle nuove funzionalita’ inserite, essere ancora valido e funzionante ma nei prossimi giorni prendero’ in esame tutti gli argomenti dei precedenti post e vedremo cosa cambia e cosa e’ …

Template di progetto per sviluppare applicazioni WPF con Intel® RealSense™

E’ disponibile, nella gallery di Visual Studio, la prima versione del mio template di progetto per applicazioni WPF scritte in C# che permette di realizzare applicazioni con l’SDK di Intel® RealSense™.Il template si può scaricare direttamente all’interno Visual Studio utilizzando il tool “Extensions and Updates”oppure all’indirizzo https://visualstudiogallery.msdn.microsoft.com/1c36ecfd-8c00-4aee-b20c-a1726ab6424dIl template esegue le seguenti operazioni per voi:Aggiunge la reference all’assembly libpxcclr.cs.dll (nelle due distinte versioni per x86 e x64);Aggiunge lo script di post build per copiare la libreria libpxccpp2c.dll dalla cartella dell’SDK alla cartella bin del vostro progetto.Una volta creato il progetto dovete rimuovere la configurazione di compilazione AnyCPU (che non ha più senso) dalla vostra solution e sarete pronti per sviluppare con Intel® RealSense™.Ovviamente dovete installare l’SDK che potete scaricare all’indirizzo https://software.intel.com/en-us/intel-realsen…