Incorporare una immagine in un tag HTML

<< [OT] Una mail per l’informazione | Home | 1° Evento After Hour DomusDotNet >>

Incorporare una immagine in un tag HTML

Nel progetto al quale sto lavorando ho avuto bisogno di creare dinamicamente delle pagine HTML con alcune immagini recuperate da una tabella e contenute in un campo di tipo BLOB.

Tipicamente, per mostrare un'immagine in una pagina web si usa il tag html

<img src="…" alt="…" />

dove src contiene il path del file dell’immagine da visualizzare.

Ma avendo le immagini registrate come blob nel database, e volendo evitare la creazione di file temporanei da referenziare come sorgente nel tag <img>, ho utilizzato il “data URI scheme” che consente di includere dati all’interno di documento html come se provenisse da una fonte esterna.

In questo modo, invece di inserire nell’attributo src il path del file dell’immagine da visualizzare, si può inserire (debitamente codificato in Base64) direttamente l’immagine stessa.

Il formato del data URI scheme è il seguente:

data:[<MIME-type>][;charset="<encoding>"][;base64],<data>

Nel nostro caso, visto che si tratta di immagini, possiamo omettere il charset encoding. Quindi per incorporare un’immagine (di tipo png) basta usare:

data:image/png;base64,<data>

dove <data> è pari al contenuto del campo BLOB convertito in base64.

Per fare delle prove basta utilizzare un’immagine, ad esempio questa

QuadroRossoBlu

aprirla con Notepad++

image3_thumb

selezionare tutto con CTRL-A e utilizzare il plugin “MIME Tools | Base64 Encode”

selezionare tutto e copiare. Ora avete la codifica in Base64 dell’immagine, da inserire nella pagina HTML.

Ad esempio, se provate a visualizzare la seguente pagina HTML

<html>
  <body>
    <p>La mia immagine:</p>
    <img src="data:image/png;base64,
         iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8
         YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFVGX//wAd
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFqPhmgAAAAlwSFlzAAAOwwAA
         DsMBx2+oZAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAACCSURBVFhH7ZdBDsAg
         CATx/59u0vbQNKtZkXAaz4I47JIQo/hEcb5BwnOiMIRhggCySUD7hfQwDPOo/8gKzXw6Vr5iZqTCmwBN
         eYRgqgYdvriwHrJZe4YBy4D9aIABOyWAU3AKTnEGBE5pdMrJTtqzjVLhFgGasoVLXoYhDBMEymVzAYu7
         EiE8mc22AAAAAElFTkSuQmCC" alt="Cornice rossa con sfiondo blu"/>
  </body>
</html>