Ho trovato una libreria per Javascript, basata su canvas, che ci permette di visualizzare le differenze che ci sono tra due immagini: js-imagediff!

Possiamo usarla sia nel browser (come nel nostro esempio) che in Node.js.

Scaricate il file Javascript dal sito; scaricate due immagini (possibilmente simili, oppure sempre le trovate sempre sul sito).

Per creare grafici nelle nostre pagine web, siamo abituati ad usare librerie esterne in Javascript.

Anche giustamente, visto che ce ne sono alcune spettacolari.

Ma in verità possiamo creare grafici anche per conto nostro, usando HTML, Canvas e Javascript (ovviamente).

Ho trovato una libreria in Javascript per effettuare screenshot di una pagina web, o di una parte di essa, e visualizzarli dentro ad una nostra pagina: html2canvas!

Il suo utilizzo non è complicato, alla funzione html2canvas bisogna passargli:

• cosa prendere (il documento intero o un determinato componente seguendo le linee guida del DOM)
• dove visualizzare il contenuto preso (nel nostro esempio dentro ad un canvas)
• cosa fare eventualmente dopo

L'elemento <canvas> di HTML5 è un elemento un pò particolare perchè nasce con lo scopo di crearci animazioni dentro.

In generale, quindi, deve avere un'altezza e una larghezza precise.

In alcuni casi potrebbe essere necessario fare in modo che sia automaticamente all 100% rispetto all'elemento in cui si trova.

Abbiamo due possibilità.