Gestire le immagini

JavaScript è in grado di manipolare immagini con diversi livelli di complessità.
Vedremo di seguito come gestire le immagini in maniera standard, creare delle semplici slide di immagini ed introdurremo l'oggetto "new Image()".

Questo articolo rappresenta di fatto l'introduzione alle API Image, SVG e Canvas, che ci consentiranno di gestire immagini già pronte ed anche generare e modificare grafica dinamicamente.

L'elemento <img>

<img id="primaImmagine" class="paesaggi" src="/image.jpeg" alt="Immagine Paesaggio" width="200px" heigth="100px">

Un elemento di tipo image contiene numerosi attributi; come accade anche per gli altri elementi del DOM potremo facilmente accedere, in lettura e scrittura, ad essi.

img.src;
img.src ="/nuovaImmagine.jpeg"
img.alt;
img.alt="Nuova Immagine";
img.width;
img.width="250px";

Slide di immagini

Potendo gestire totalmente l'elemento <img> tramite JavaScript potremo realizzare semplici funzionalità come ad esempio la navigazione tra un elenco di immagini stile slide di immagini

<div>
<img id="slideImmagini" src="https://www.cinquepuntozero.it/wp-content/uploads/2022/08/primaImmagine.jpg">
<button id="prossima" type="button">Prossima Immagine</button>
</div>

Per realizzare una slide di immagini si parte sempre da un elemento statico che è nel nostro esempio una singola immagine

var immagini = ["https://www.cinquepuntozero.it/wp-content/uploads/2022/08/primaImmagine.jpg", "https://www.cinquepuntozero.it/wp-content/uploads/2022/08/secondaImmagine.jpg", "https://www.cinquepuntozero.it/wp-content/uploads/2022/08/terzaImmagine.jpg", "https://www.cinquepuntozero.it/wp-content/uploads/2022/08/quartaImmagine.jpg"];

var immagineAttuale = document.getElementById("slideImmagini");

var bottoneProssima = document.getElementById("prossima");

var contatore = 0;
bottoneProssima.onclick = function () {
  contatore = (contatore + 1) % immagini.length;
  immagineAttuale.src = immagini[contatore];
};

Nello script abbiamo creato una variabile array che conterrà tutte le immagini; una per l'immagine principale, una per il bottone, una variabile contatore ed una funzione associata al bottone ed all'evento "click" che si occupa di "ciclare" le immagini.

Prossima Immagine

L'operatore modulo

L'operatore modulo, in javascript indicato con "%", in matematica serve per conoscere il resto di una divisione intera.
Divide un numero intero per un altro numero intero ed ottiene un numero corrispondente allo "scarto" dell'operazione.

var risultato = numeroIntero1 % numeroIntero2;

Questo operatore consente di verificare se il primo numero-intero è un multiplo del secondo numero-intero ed il risultato sarà zero.

Tornare al valore iniziale

Nella funzione per "ciclare" le immagini utilizziamo l'operatore modulo in modo che, una volta che la slide visualizzerà l'ultima immagine, il contatore possa riavere valore 0 e la slide possa ritornare indietro all'immagine con indice 0.

console.log(1%4);
//contatore 1
console.log(2%4);
//contatore 2
console.log(3%4);
//contatore 3
console.log(4%4);
//contatore 0

Verificare se un numero e pari o dispari

L'operatore modulo è utilizzato spesso anche per verificare se il numero è un numero pari o dispari.
Sarà sufficiente infatti calcolare il modulo di 2: se il risultato è zero il numero è pari altrimenti il numero sarà dispari

function pariDispari(n){
var risultato = n % 2;
if(risultato == 0){
console.log(`Il numero ${n} è pari`);
}else{
console.log(`Il numero ${n} è dispari`);
} 
}

Mostrare immagini successive automaticamente

Per consentire alla slide di risponde sia all'azione dell'utente, evento click, sia che le immagini successive siano mostrate in loop automaticamente, sarà possibile sfruttando il metodo .setInterval().
Per farlo memorizziamo la funzione in una variabile "prossimaImmagine"

var immagini2 = ["https://www.cinquepuntozero.it/wp-content/uploads/2022/08/primaImmagine.jpg", "https://www.cinquepuntozero.it/wp-content/uploads/2022/08/secondaImmagine.jpg", "https://www.cinquepuntozero.it/wp-content/uploads/2022/08/terzaImmagine.jpg", "https://www.cinquepuntozero.it/wp-content/uploads/2022/08/quartaImmagine.jpg"];

var immagineAttuale2 = document.getElementById("slideImmagini2");

var bottoneProssima2 = document.getElementById("prossima2");

var contatore2 = 0;

var prossimaImmagine2 = function () {
  contatore2 = (contatore2 + 1) % immagini2.length;
  immagineAttuale2.src = immagini2[contatore2];
};

bottoneProssima2.onclick = prossimaImmagine2;
window.setInterval(prossimaImmagine2, 1700);

Prossima Immagine

new Image()

È possibile creare un elemento immagine da aggiungere al DOM utilizzando il costruttore Image(); è del tutto analogo alla creazione di un elemento <img>, ma risulta comodo per il prevaricamento di immagini.

Infatti, la creazione di un oggetto Image fa sì che l'immagine venga caricata nella cache del browser senza essere visualizzata sulla pagina.

Il caricamento di ogni immagine avviene nel momento in cui assegniamo il nome del file all'attributo "src" questo comportare un'attesa da parte dell'utente specie quando siamo di fronte a immagine di grandi dimensioni.

var immagini = [];

var immagine1 = new Image();
immagine1.src = "immagine1.jpg";
immagini.push(immagine1);

var immagine1 = new Image();
immagine2.src = "immagine2.jpg";
immagini.push(immagine2);

...
..

var immagineAttuale = document.getElementById("slideImmagini");
 
var bottoneProssima = document.getElementById("prossima");

var contatore = 0;
bottoneProssima.onclick = function () {
  contatore = (contatore + 1) % immagini.length;
  immagineAttuale.src = immagini[contatore].src;
};

Questo tipo di approccio consente di pre-caricare da-prima le immagini nella cache del browser prima-ancora che l'utente decida di cambiare immagine cliccando sul bottone "Prossima immagine".
La funzione quindi non caricherà sul momento la risorsa ma mostrerà ciò che è già presente e caricato sul browser.