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”

image8_thumb

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>

Si ottiene:

image20_thumb

La tecnica di inclusione di dati “in linea” mediante il data URI scheme è utile anche in altre occasioni, ben illustrate qui.

posted @ lunedì 21 giugno 2010 02:12

Print
Comments have been closed on this topic.
«ottobre»
domlunmarmergiovensab
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456