JavaScript: effetto bianco e nero invertito sulle immagini

Creare un effetto bianco e nero invertito su un'immagine può aggiungere un tocco creativo unico ai tuoi progetti web. In questo articolo, ti guideremo attraverso il processo di creazione di una funzione JavaScript che può essere utilizzata per applicare questo effetto alle immagini presenti nel tuo sito web.

Prima di immergerci nel codice, è importante capire cosa intendiamo per "effetto bianco e nero invertito". Questo effetto converte un'immagine a colori o in bianco e nero nella sua versione in scala di grigi, e poi inverte i toni rendendo i chiaroscuri opposti. Le aree chiare diventano scure e viceversa, risultando in un'immagine con un contrasto visivo distintivo.

Inizia inserendo un elemento canvas nel tuo HTML dove l'immagine modificata sarà visualizzata. Dovrai anche avere un'immagine di partenza, che può essere inclusa direttamente nell'HTML o caricata dinamicamente via JavaScript.

Utilizza JavaScript per caricare l'immagine nel canvas. Questo passaggio è necessario per manipolare i pixel dell'immagine.

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

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

La parte cruciale è la funzione applyInvertBlackAndWhite. Qui, leggi i pixel dell'immagine, convertili in scala di grigi e quindi inverte i colori.

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

    for (let i = 0; i < data.length; i += 4) {
        // Conversione in scala di grigi
        const grey = data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11;
        
        // Inversione dei colori
        data[i] = 255 - grey;        // Rosso
        data[i + 1] = 255 - grey;    // Verde
        data[i + 2] = 255 - grey;    // Blu
    }
    
    ctx.putImageData(imageData, 0, 0);
}

Conclusione

Hai ora creato con successo una funzione JavaScript che applica un effetto bianco e nero invertito alle tue immagini. Questo effetto non solo aggiunge un elemento visivo interessante al tuo sito web, ma può anche essere utilizzato per mettere in risalto determinati elementi grafici o per creare un'atmosfera particolare. Ricorda che giocare con i pixel di un'immagine offre infinite possibilità creative, quindi non esitare a esplorare ulteriormente e personalizzare questo effetto secondo le tue esigenze.