Nel precedente articolo, ho spiegato come acquisire immagini da fotocamera/galleria dello smartphone utilizzando esclusivamente funzionalità di HTML5.

Oggi mi riallaccio allo stesso argomento e lo estendo, proponendo un semplice script che oltre ad acquisire l’immagine le applica un watermark.

Per lo scopo utilizzo l’oggetto CANVAS , che permette di ‘disegnare’ sulla pagina web, e al suo interno carico prima l’immagine scelta alla quale poi sovrappongo il watermark (righe 27-43).

Per migliorare la visualizzazione sul display del terminale, prima di tutto ridimensiono il canvas utilizzando le proporzioni dell’immagine caricata. (righe 34-36)

Di seguito il codice:

L’immagine generata potrà essere poi ‘estratta’ dal canvas con questo codice:

var data = canvas.toDataURL('image/png');

che restituisce l’immagine sotto forma di stringa in base64 ( data:image/png;base64,… ): se caricata su un server remoto, sarà sufficiente rimuovere il prefisso “ data:image/png;base64,”, effettuare la decodifica da base64 e salvare il risultato su file.

UPDATE 04/06/2013
dopo aver letto questa discussione su G+ , ho rimesso mano allo script, rendendolo compatibile anche con Firefox (riga 25). Grazie a tutti per le segnalazioni.

Buon divertimento!