Pillole di codice #11 Masterclass sulle immagini

Oggi niente video, oggi una masterclass scritta sulla gestione avanzata delle immagini in Javascript.

In questa guida vedremo come gestire in modo approfondito le immagini, partendo da come “l’oggetto immagine” (in senso informatico) è strutturato in memoria.

Le immagini da un punto di vista digitale sono strutturate come un array bidimensionale di pixel, una griglia in cui ogni cella rappresenta un pixel ed è riempita da un colore (RGBA).

Prendiamo quindi ad esempio la bassissima risoluzione del Mario qui sopra. Ingrandendo moltissimo l’immagine possiamo vedere ogni singolo pixel che compone l’immagine con il suo colore.

In memoria però non esiste una vera e propria concezione bidimensionale, in quanto i byte vengono salvati monodimensionalmente in un array progressivo. Viene quindi necessario capire come i dati dell’immagine siano salvati in memoria, per poter in seguito agire su di essi.

Ipotizzando che l’asse x dei pixel si sviluppi da sinistra a destra e l’asse y si sviluppi dall’alto al basso il ciclo che ci permetterà di ricavare ogni singolo pixel è:

 img.loadPixels();
  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++) {
      var index=(x+y*img.width)*4
      let rosso=img.pixels[index+0];
      let verde=img.pixels[index+1];
      let blu=img.pixels[index+2];
      let trasp=img.pixels[index+3];
      img.set(x, y, [rosso, verde, blu,trasp]);
    }
  }
  img.updatePixels();

Come si può vedere nel codice postato sopra sono necessarie delle chiamate extra per poter agire sui pixel. La prima è loadPixels(), che dice all’interprete Javascript che noi vogliamo trattare l’immagine come array di pixel.

La seconda funzione è set() che ci permette di impostare il pixel presente in coordinate X,Y con i valori RGBA presenti nell’array specificato.

La terza ed ultima funzione importante è updatePixels che sostanzialmente dice all’interprete JavaScript di prendere i dati “bozza” editati durante le operazioni di set() e salvarli nella mia immagine.

Le immagini oltre ad essere caricate possono anche essere create come array di pixel “vuoti” (R,G,B,A=0,0,0,0). La funzione per creare questa tipologia di oggetti è: CreateImage(W,H) in cui W e H rappresentano la larghezza e l’altezza dell’immagine, che poi può essere “colorata” con la funzione set() vista sopra.

Esistono poi altre 3 funzioni utili alla manipolazione delle immagini:

tint(R,G,B,A) che mi permette di “tinteggiare” un’immagine con i valori dei parametri riportati nella funzione
copy(srcImage,sx,sy,sw,sh,dx,dy,dw,dh) che mi permette di copiare porzioni di un’immagine sorgente in un’immagine destinazione. In questa funzione se le aree copiate non coincidono come dimensioni l’interprete e il framework si occuperanno di “stretchare” il contenuto
mask(maschera) applica ad un’immagine sorgente i valori di alpha di un’immagine maschera, unendo così i contenuti e mostrando una nuova immagine “mascherata”