Sono sempre stato affascinato dal fenomeno di Instagram e dalla sua popolarità. I filtri fotografici non sono una novità, ma l'uso dinamico di questi filtri non è sempre stato possibile. Costruire la funzionalità in un'applicazione iOS / Android richiede molto tempo. Fortunatamente gli sviluppatori hanno lavorato per replicare questo processo per il web usando JavaScript.
In questo tutorial voglio dimostrare come creare una semplice webapp con filtro in stile Instagram usando jQuery. La libreria si chiama CamanJS che è facilmente estensibile per creare i propri plugin di filtro. Questo non richiede jQuery ma ho scelto di usarlo per un ambiente di sviluppo più semplice. Dai un'occhiata alla mia demo di esempio per capire l'obiettivo di questo tutorial.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Per prima cosa ho scaricato una copia locale di jQuery insieme alla libreria CamanJS su Github. Devo sottolineare che è necessario ospitare i file su un localhost o su un server esterno per testare gli effetti di lavoro. Questo riguarda un problema con l'host di origine degli elementi Canvas che diventa piuttosto confuso se sei nuovo all'idea.
Per riassumere: non sorprenderti se apri i file localmente e non funzionano. Dovrai farli ospitare da qualche parte per testarlo.
Il mio file di indice contiene molti commenti aggiuntivi su come implementare Caman. Ho creato un elenco di collegamenti di navigazione che applicano filtri fissi sopra l'immagine preesistente. Di seguito è una copia del mio intero corpo HTML:
Si noti il commento che nasconde un'immagine con l'ID #mainpic. Questo utilizza alcuni attributi di dati HTML5 come Dati-caman-HiDPI e Dati-caman. In realtà puoi impostare un numero di filtri predefiniti che si caricano immediatamente sulla foto. Questo genera un nuovo elemento canvas direttamente nella pagina senza scrivere alcun codice JavaScript.
Ma dal momento che vogliamo approfondire un po 'di più ho creato un elemento canvas con l'ID #maincanvas. Questo verrà utilizzato per caricare la foto e quindi applicare i filtri ripetutamente fino a quando la tela non viene ripristinata.
Generazione dell'immagine della tela
Giù in fondo alla mia pagina HTML ho scritto tutto il codice JavaScript in un paio di tag. Ogni link ha il proprio gestore di eventi di click per applicare vari gradi di filtri sulla tela.
La variabile tela bersaglia l'elemento come un oggetto jQuery, ma non è l'elemento canvas naturale. Otteniamo la tela stessa usando canvas [0] che è utile per acquisire dettagli usando getContext (). In generale, questo contesto ci consente di scrivere e riscrivere gli oggetti sul canvas da JavaScript. I link ai filtri ottengono le proprie variabili jQuery in modo da poterli identificare rapidamente su ogni evento click.
Ogni volta che si fa clic sul pulsante di ripristino, la tela dovrebbe rimuovere tutti i filtri e incorporare nuovamente l'immagine nella pagina da zero. Ciò ha richiesto molte ricerche per capire come cancellare la tela di tutto il contesto, e quindi aggiungere l'immagine indietro senza filtri CamanJS. Dai un'occhiata a questo post di Overflow dello stack che va più nel dettaglio.
Fondamentalmente stiamo reimpostando la tela sulla stessa larghezza / altezza ma rimuovendo tutto il contesto. Il nuovo contesto viene ridisposto creando un elemento immagine dinamico utilizzando JavaScript. Caman ha un metodo chiamato ripristinare () rimuovere tutti i filtri e ricominciare da capo.
Metodi di filtro
Il resto del mio codice è bloccato in gestori di eventi click. Ciò significa che ogni volta che un utente fa clic su uno dei collegamenti di navigazione, gestiamo la funzione in modo diverso. Ho incorporato un certo numero di filtri predefiniti di Caman, ma ne valgono ancora molti da esplorare.
Questi sono i primi quattro gestori di eventi che aggiungono luminosità, rumore, contrasto e colorazione seppia alla foto. Il valore numerico passato nel metodo definisce la forza del filtro da applicare. I numeri in genere vanno da 0 a 100, ma in realtà dipende dal metodo che viene chiamato.
La sintassi è molto facile da riprendere una volta che l'hai veramente guardata. Caman () è il metodo di inizializzazione che prima prende il selettore canvas, seguito dall'immagine da filtrare.Quindi all'interno di una funzione di callback definiamo quali filtri devono essere applicati. I filtri vengono applicati alla tela dell'immagine utilizzando render ().
Ciascuno di questi filtri si comporterà nel tempo. Ad esempio, se fai clic due volte su Seppia otterrai due effetti filtro ripetuti usando i toni seppia. Ho tenuto tutto ad un valore inferiore di 10-20, in modo da poter osservare la differenza incrementale.
Il mio ultimo evento pulsante aggiunge una leggera sovrapposizione di colore sull'immagine. Questo si comporta come un filtro di opacità utilizzando un colore uniforme come sfondo. Si noti che la sintassi accetterà valori di colore RGB o esadecimali. Dai un'occhiata alla funzionalità integrata di Caman per trovare ancora più effetti di filtro.
Demo dal vivo - Scarica il codice sorgente
Chiusura
Probabilmente non ci saranno troppi progetti in cui è necessario replicare questi effetti fotografici. Ma è sempre divertente giocare con le nuove librerie JS, e non sai mai quando potrebbe essere applicabile. Sentiti libero di scaricare una copia del mio codice sorgente e vedere cos'altro puoi costruire. Inoltre se avete domande o commenti lasciate alcune idee nei commenti qui sotto.