html2canvas: come generare screenshot di una pagina web o di una parte di essa con un solo click

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à).

Cita

Canvas è 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&ograve; 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 😉