Skapa Instagram-Style Photo Filters Med jQuery (JavaScript)

Jag har alltid varit fascinerad av instagramfenomenet och hur snabbt det steg till popularitet. Fotofilter är inget nytt men dynamisk användning av dessa filter har inte alltid varit möjligt. Att bygga funktionaliteten i en iOS / Android-applikation kräver mycket tid. Tack och lov har utvecklare arbetat för att replikera denna process för webben med JavaScript.

I denna handledning vill jag demonstrera hur man bygger en enkel Instagram-stil-filterwebapp med jQuery. Biblioteket heter CamanJS som enkelt kan utökas för att skapa egna filter plugins. Det här kräver inte jQuery men jag har valt att använda den för en enklare utvecklingsmiljö. Ta en titt på min live-demo för att förstå målet med denna handledning.

Live Demo - Hämta källkod

Komma igång

Först har jag laddat ner en lokal kopia av jQuery tillsammans med CamanJS-biblioteket på Github. Jag bör påpeka att du måste vara värd för dina filer på en localhost eller extern server för att testa arbetseffekterna. Det här gäller en fråga med ursprungsvärden av Canvas-element som blir ganska förvirrande om du är ny på idén.

Sammanfattningsvis: Var inte förvånad om du öppnar filerna lokalt och de fungerar inte. Du måste få dem värd någonstans för att testa detta.

Min indexfil har många extra kommentarer om hur du kan implementera Caman. Jag har skapat en lista över navigeringslänkar som gäller stabila filter ovanpå den befintliga bilden. Nedan finns en kopia av hela min HTML-kropp:

   <h1>Instagram-Style Photo Filters</h1>  Återställ Photo Brightness Noise Sepia Contrast Add Blue

Observera kommentaren gömmer en bild med ID #mainpic. Detta använder vissa HTML5-data attribut som data CAMAN-HiDPI och data CAMAN. Du kan faktiskt ange ett antal fördefinierade filter som omedelbart laddas på bilden. Det här skapar ett nytt kanvaselement direkt in i sidan utan att skriva någon JavaScript-kod.

Men eftersom vi vill dyka lite djupare har jag skapat ett litet dukelement med ID #maincanvas. Detta används för att ladda bilden och sedan applicera filter flera gånger tills duken är återställd.

Generering av kanvasbilden

Ned längst ner på min HTML-sida har jag skrivit all JavaScript i ett par taggar. Varje länk har sin egen händelsehanterare för att tillämpa olika grader av filter på duken.

 var kanvas = $ ('# maincanvas'); var ctx = kanfas [0] .getContext ("2d"); var $ reset = $ ('# resetbtn'); var $ brightness = $ ('# brightnessbtn'); var $ noise = $ ('# noisebtn'); var $ sepia = $ ('# sepiabtn'); var $ contrast = $ ('# contrastbtn'); var $ color = $ ('# colorbtn');

Variabeln duk riktar elementet som ett jQuery-objekt, men det är inte det naturliga dukelementet. Vi får själva duken genom att använda duk [0] vilket är till hjälp för att förvärva detaljer med getContext (). Generellt sett tillåter det här sammanhanget att skriva och skriva om objekt på duken från JavaScript. Filterlänkarna får sina egna jQuery-variabler så att vi snabbt kan identifiera dem på varje klickhändelse.

 $ Reset.on ( 'klick', funktion (e) {e.preventDefault (); var img = new Image (); img.src = "img / city.jpeg", ctx.save (); ctx.setTransform ( 1, 0, 0, 1, 0, 0); ctx.clearRect (0, 0, duk [0] .width, duk [0] .height); ctx.restore (); ctx.drawImage (img, 0, 0); Caman ('# maincanvas', 'img / city.jpeg', funktion () {this.revert (false); this.render ();});});

När återställningsknappen är klickad bör duketten ta bort alla filter och bädda in bilden på sidan från början. Det tog mycket forskning för att räkna ut hur man rensar duken av allt sammanhang och sedan lägga till bilden utan några CamanJS-filter. Ta en titt på detta Stack Overflow-inlägg som går in i lite mer detaljer.

I grund och botten återställer du duken till samma bredd / höjd men tar bort alla sammanhang. Det nya sammanhanget blir återrapporterat genom att skapa ett dynamiskt bildelement med hjälp av JavaScript. Caman har en metod som heter återgå() att ta bort alla filter och börja om igen.

Filtermetoder

Resten av min kod är blockerad i händelsehanterare för klick. Det innebär att varje gång en användare klickar på någon av navigeringslänkarna hanterar vi funktionen annorlunda. Jag har införlivat ett antal Camans standardfilter men det finns så många mer värda att utforska.

 $ Brightness.on ( 'klick', funktion (e) {e.preventDefault (); CAMAN (# maincanvas ", 'img / city.jpeg', function () {this.brightness (10); this.contrast ( 0); this.render (funktion () {// någon återuppringningsfunktion efter rendering});});}); $ noise.on ('klicka', funktion (e) {e.preventDefault (); Caman ('# maincanvas', 'img / city.jpeg', funktion () {this.noise (10); this.render );});}); $ Contrast.on ( 'klick', funktion (e) {e.preventDefault (); CAMAN (# maincanvas ", 'img / city.jpeg', function () {this.contrast (10); this.render ( );});}); $ Sepia.on ( 'klick', funktion (e) {e.preventDefault (); CAMAN ( '# maincanvas', 'img / city.jpeg', function () {this.sepia (20); this.render ( );});});

Dessa är de första fyra händelsehanterarna som lägger till ljusstyrka, brus, kontrast och sepiafärgning på bilden. Det numeriska värdet som passerat in i metoden definierar hur mycket styrka av filtret ska appliceras. Numren varierar vanligtvis från 0-100 men det beror verkligen på den metod som kallas.

Syntaxen är väldigt lätt att hämta när du verkligen tittat på det. CAMAN () är initialiseringsmetoden som först tar kanvasväljaren följt av bilden som ska filtreras.Därefter definierar vi inom vilken återuppringningsfunktion vilka filter som ska tillämpas. Filtret appliceras på bildduken genom att använda göra().

Vart och ett av dessa filter kommer att förena över tiden. Så till exempel om du klickar på Sepia två gånger får du två upprepade filtereffekter med sepia-toner. Jag har hållit allt till ett lägre värde på 10-20 så att du kan se den inkrementella skillnaden.

 $ color.on ('click', funktion (e) {e.preventDefault (); Caman ('# maincanvas', 'img / city.jpeg', funktion () {this.colorize ("# 3c69da", 10) ; // alternativ syntax // this.colorize (60, 105, 218, 10); this.render ();});});

Min sista knapphändelse lägger till en mycket liten färgöverläggning på bilden. Detta beter sig som ett opacitetsfilter med en solid färg som bakgrund. Observera att syntaxen kommer att acceptera RGB- eller hexadecimala färgvärden. Ta en titt på Camans inbyggda funktionalitet för att hitta ännu fler filtereffekter.

Live Demo - Hämta källkod

Stängning

Det kommer förmodligen inte vara för många projekt där du måste replikera dessa fotoeffekter. Men det är alltid roligt att leka runt med nya JS-bibliotek, och du vet aldrig när det kan vara tillämpligt. Du kan ladda ner en kopia av min källkod och se vad du kan bygga mer. Dessutom om du har några frågor eller kommentarer släpp några idéer i kommentarerna nedan.