C# Windows Store - Salvare un Canvas in un'immagine

Dopo giorni di prove, ricerche online, test di qualche libreria, oggi vi voglio spiegare come salvare tutto quello che inserite in un canvas, in un'immagine tramite l'utlizzo di C# e Javascript in un'applicazione per Windows Store.

Per prima cosa, apriamo visual studio e, creiamo un nuovo progetto Windows Store tramite il linguaggio C#:

Ora, apriamo il file MainPage.xaml e modifichiamolo nel modo seguente:

Spigazione: Creiamo una Barra in basso all'applicazione con due bottoni, uno per scegliere la foto e uno, per applicare l'effetto su di essa. Poi inseriamo un WebView non visibile che effettuerà la modifica della foto.

Ora apriamo MainPage.xaml.cs e inseriamo:

1. i seguenti using:
   
2. Le seguenti variabili:
   

Spiegazione: Un array di byte che contiene la foto; width e height, rispetivamente lunghezza e altezza della foto; htmlFragment è il contenuto della WebView nascosta, contiene una funzione Javascript che si occupa di applicare l'effetto voluto alla foto. In particolare: questa funzione inserisce in alto a sinistra la data e, nella metà verso destra la scritta 'Hello World'.

      3. Il costruttore:

Spiegazione: Carica la pagina nella WebView

      4. La funzione Folder_Click, per quando viene cliccato il primo bottone sulla BottomBar:

Spiegazione: Visualizzo la finestra per scegliere l'immagine(solo .jpg), se ne viene scelta una, controllo se c'è già un'immagine visualizzata e, la cancello, poi imposto la nuova immagine selezionata per essere visualizzata e abilito il bottone per applicare l'effetto.

      5. La funzione Attach_Click, per quando viene cliccato il secondo bottone sulla BottomBar:

Spiegazione: Converto l'immagine in una stringa in base64 e la spedisco come parametro alla funzione Javascript Elaborate.

      6. La funzione On_ScriptNotify, che viene richiamata dalla funzione Javascript quando finisce di
          elaborare la foto:

Spiegazione: Recupero la foto elaborata, la converto in byte[], visualizzo la finestra per salvare la foto(solo .png), se è stato scelto un file, scrivo i byte[] nel file, cancello la foto visualizzata, carico quella elaborata e la visualizzo. Se non viene scelto nessun file su cui salvare, cancello la foto visualizzata e disabilito il secondo bottone sulla BottomBar.

Compiliamo ed eseguiamo. Piaciuto?