canvas

Mattepuffo's logo
Creare PDF in Rust con rust-pdf

Creare PDF in Rust con rust-pdf

Oggi vediamo un esempio molto basico di creazione di PDF in Rust con rust-pdf.

Non essendo un linguaggio che uso molto per lavoro, non ho approfondito più di tanto.

Quindi vediamo come installarlo e un esempio basico per iniziare.

Mattepuffo's logo
Visualizzare le differenze tra due immagini in Javascript

Visualizzare le differenze tra due immagini in Javascript

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

Mattepuffo's logo
Creare grafici in HTML usando i Canvas

Creare grafici in HTML usando i Canvas

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

Mattepuffo's logo
Effettuare screenshot di una pagina web con Javascript

Effettuare screenshot di una pagina web con Javascript

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

Mattepuffo's logo
Canvas con altezza e larghezza al 100%

Canvas con altezza e larghezza al 100%

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