Vi piacerebbe offrire ai vostri utenti la possibilità di salvare in formato immagine il contenuto di un paragrafo? O di un div? Oppure tutta la pagina?
Ci sono dei tutorial online, ma son sempre molto complessi e non si capisce mai come arrivare a creare un bottone che, appena premuto, ci genera in formato immagine quanto stiamo vedendo.
Io ho applicato questo metodo, html2canvas, nel nuovo tool: https://www.laltroweb.it/tools/checkheader/ (così da permettere il salvataggio dell’output con facilità).
CitaCanvas è una estensione dell’HTML standard che permette il rendering dinamico di immagini bitmap gestibili attraverso un linguaggio di scripting.
>>> https://it.wikipedia.org/wiki/Canvas_(elemento_HTML)
Codice di esempio:
<!-- JQuery è necessario --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><!-- Questa la libreria usata, versione min.*, meglio salvarla sul proprio spazio --><scriptsrc="https://raw.githubusercontent.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script><!-- Content editable lo ho aggiunto io solo per questo esempio così da rendere il testo modificabile e generare l'immagine che si preferisce --><pcontenteditable="true"id="esempio"> <spanstyle="color:#0000FF; font-style: italic;">PS: Questo può essere modificato...</span> <spanstyle="color:#FF0000; font-weight: bold;">Inserisci il tuo testo e poi crea la tua immagine!</span></p><buttonid="saveasimage">Crea immagine...</button><hr><pid="canvas_imagehere"></p><script>// evento onclick su tale bottone... $('#saveasimage').on('click',function(event){ // Prima rimuoviamo tutto ed evitiamo le generazioni multiple $('#canvas_imagehere > *').remove(); html2canvas($('#esempio'), { onrendered:function(canvas) { // Generiamo link cliccabile var data ='<img src="'+canvas.toDataURL()+'" alt="Immagine Canvas">' $('#canvas_imagehere').append(data); } });});</script>
Prova il risultato:
Semplicissimo, ed estremamente comodo, non trovate? 🙂
I tanti commenti nel codice sono per spiegarvi un po’ cosa ho fatto e come funziona…
Il “clear canvas”, ad esempio, lo avevo fatto in js (così lo avevo trovato cercando una soluzione – soluzione che non serviva se disabilitavo o nascondevo il pulsante, ma poter sfruttare più volte lo script e fare tutte le prove mi sembrava più “carino”…), fin quando non ho pensato di sfruttare jquery (già presente nello script)! In ogni caso, ho lasciato entrambe le soluzioni nei commenti.
Dubbi? Domande? Chiedete pure 😉