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
aprirla con Notepad++
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>
Si ottiene:
La tecnica di inclusione di dati “in linea” mediante il data URI scheme è utile anche in altre occasioni, ben illustrate qui.