JavaScript: effetto scala di grigio sulle immagini

Creare un effetto in scala di grigi per un'immagine in un elemento HTML canvas utilizzando JavaScript è un ottimo modo per aggiungere un tocco estetico o per preparare le immagini per ulteriori elaborazioni. In questo articolo, esploreremo come applicare il filtro in scala di grigi a un'immagine caricata in un canvas, sfruttando le capacità di elaborazione delle immagini di JavaScript.

Nel nostro codice JavaScript, iniziamo con il caricamento dell'immagine che vogliamo modificare. Per fare ciò, utilizziamo l'oggetto Image di JavaScript per caricare l'immagine e disegnarla sul canvas una volta che è completamente caricata.

const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');

let img = new Image();
img.src = 'percorso/della/tua/immagine.jpg'; // Sostituire con il percorso effettivo

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    applyGrayscale();
};

Il filtro in scala di grigi può essere applicato convertendo ciascun pixel dell'immagine. Per ogni pixel, calcoliamo la media dei valori di rosso, verde e blu (RGB) e assegniamo questa media a ciascun canale colore, ottenendo così il grigio corrispondente.

function applyGrayscale() {
    let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    let data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
        let gray = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = gray;     // rosso
        data[i + 1] = gray; // verde
        data[i + 2] = gray; // blu
    }

    ctx.putImageData(imageData, 0, 0);
}

In questo codice, getImageData ci permette di ottenere i pixel dell'immagine come un array, dove ogni quattro elementi rappresentano i canali rosso, verde, blu e alpha (trasparenza) di un pixel. Modificando questi valori e poi utilizzando putImageData, possiamo riapplicare l'immagine modificata al canvas.

Una volta eseguito lo script, l'immagine originale nel canvas verrà trasformata in scala di grigi. Questa tecnica di manipolazione delle immagini può essere particolarmente utile per applicazioni web che richiedono un'elaborazione dell'immagine lato client, come l'anteprima di effetti fotografici o la preparazione di immagini per l'analisi.

Implementando questo approccio, gli sviluppatori possono sfruttare le potenti capacità di elaborazione delle immagini di JavaScript direttamente nei browser moderni, senza la necessità di backend complessi o librerie di terze parti.