Pillole di codice #9 Immagini in JavaScript

Finalmente arriviamo a trattare le immagini in Javascript.

Le immagini vanno pensate e trattate esattamente come dei rettangoli, come avevamo visto in questo articolo, l’unica differenza è che per elaborare un’immagine prima bisogna caricarla.

Questa operazione si svolge facilmente con i seguenti comandi:

let img;

function setup(){ 
 img=loadImage("PATH"); 
}

Piccola nota, che non ho detto nel video:

il browser potrebbe bloccare il caricamento delle immagini se lavorate in locale, per questi esercizi potrebbe essere necessario installare un server locale (tipo MAMP)

Il path lo stabiliamo in maniera relativa rispetto al file HTML.

Di seguito (nella funzione draw) si disegna l’immagine:

function draw(){
   image(img, x, y, width, height);
}

La definizione è identica a quella di un rettangolo, solo che è presente un parametro iniziale (img) che in pratica dice al rettangolo come colorare i suoi pixel.

I parametri Width e Height sono facoltativi, se non specificati l’immagine viene caricata nella sua risoluzione naturale.

Se vogliamo ridimensionare l’immagine esistono due strategie: la prima consiste nell’impostare i parametri width e height nella funzione image(), la seconda nel ridimensionale l’oggetto immagine tramite la funzione interna resize().

Di queste due strategie quella preferibile è quella che utilizza resize() in quanto se si imposta uno dei due parametri (width o height) a 0 la funzione mantiene la proporzione dell’immagine adattandola alla dimensione del lato specificato.

Ecco il video della pillola

Compila il form qui sotto per ricevere subito nella tua casella email i files della lezione.