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!