Share
I den forrige opplæringen lærte du hvordan du lager et bilderedigeringsprogram ved hjelp av CamanJS som kan bruke grunnleggende filtre som kontrast, lysstyrke og lyd til et bilde. CamanJS har også noen andre innebygde filtre som Nostalgi, Pinhole, Soloppgang, etc., som vi brukte direkte på bildet.
I denne opplæringen vil vi dekke noen mer avanserte funksjoner i biblioteket som Lag, Blend Modes og Events.
I den første opplæringen arbeidet vi bare med et enkelt lag som inneholdt vårt bilde. Alle filtre som vi søkte bare manipulerte det største laget. CamanJS lar deg lage flere lag for å gjøre det mulig å redigere bildene dine på en mer sofistikert måte. Du kan opprette nestede lag, men de vil alltid bli brukt på foreldre laget som en stabel.
Når du lager et nytt lag og bruker det på overordnet laget, vil standard blandingstilstand bli brukt normal. Du kan lage et nytt lag på lerretet ved hjelp av newLayer () metode. Når du lager et nytt lag, kan du også sende en tilbakeringingsfunksjon som vil være nyttig hvis du har tenkt å manipulere laget.
Denne funksjonen kan brukes til mange oppgaver som å sette blandemodus for det nye laget ved hjelp av setBlendingMode () metode. På samme måte kan du styre opaciteten til det nye laget ved hjelp av opasitet () metode.
Ethvert nytt lag som du lager, kan fylles med en solid farge ved hjelp av Fyll farge() metode. Du kan også kopiere innholdet til overordnet laget til det nye laget ved hjelp av copyParent () metode. Alle filtene som vi lærte om i den forrige opplæringen, kan også brukes på det nye laget som vi lager. For eksempel kan du øke lysstyrken til det nyopprettede laget ved å bruke this.filter.brightness (10).
I stedet for å kopiere forelder eller fylle laget med en solid farge, har du også muligheten til å laste inn et annet bilde i laget og legge det over på foreldrene. På samme måte som hovedbildet, vil du også kunne bruke forskjellige filtre til det overlagte bildet.
I den følgende kodestykket har vi knyttet en klikkhendelseshåndterer til tre knapper som fyller det nye laget med en solid farge, overordnet lag og et overleggs bilde.
Accentsconagua
$ ('# oransje-btn'). på ('klikk', funksjon (e) Caman ("# lerret", funksjon () this.newLayer (funksjon () this.opacity (50); this.fillColor ('# ff9900');); this.render (););); $ ('# foreldre-btn'). på ('klikk', funksjon (e) Caman ("# lerret", funksjon () this.newLayer (funksjon () this.opacity (50); this.copyParent (); this.filter.brightness (20);); this.render (););); $ ('# overlay-btn'). på ('klikk', funksjon (e) var oImg = nytt bilde (); oImg.src = "trees.png"; Caman ("# lerret" this.newLayer (function () this.opacity (50); this.overlayImage (oImg); this.filter.brightness (20);); this.render ();););I den forrige delen holdt vi opaktheten til noe nytt lag som vi la til lerretet under 100. Dette ble gjort fordi det nye laget ellers ville gjemme det gamle laget helt. Når du legger ett lag over et annet, kan du spesifisere en blandingstilstand som bestemmer det endelige resultatet etter plassering. Blandemodus er satt til normal som standard.
Dette betyr at et nytt lag som du legger til på lerretet, gjør laget under det usynlig. Biblioteket har totalt ti blandingsmoduser. Disse er normal, multiplisere, skjerm, overlegg, forskjell, addisjon, utelukkelse, mykt lys, utelukkelse, og mørkere.
Som jeg tidligere nevnte, normal blandingsmodus setter den endelige fargen til å være lik fargen til det nye laget. De multiplisere blandingsmodus bestemmer den endelige fargen på en piksel ved å multiplisere de enkelte kanalene sammen og deretter dele resultatet med 255. Den forskjell og addisjon Blandingsmodusene fungerer på en lignende måte, men de trekker og legger til kanalene.
De mørkere blandingsmodus setter den endelige fargen på en piksel som er lik den laveste verdien av individuelle fargekanaler. De lette blandingsmodus setter den endelige fargen på en piksel som er lik den høyeste verdien av individuelle fargekanaler. De utelukkelse blandingsmodus ligner noe forskjell, men det setter kontrasten til en lavere verdi. I tilfelle av skjerm blandingsmodus, blir den endelige fargen oppnådd ved å invertere farger på hvert lag, multiplisere dem, og deretter omvendt resultatet.
De overlegg blandingsmodus virker som multiplisere Hvis bunnfargen er mørkere, og det virker som skjerm hvis bunnfargen er lettere.
Hvis du vil at fargene i forskjellige lag skal samhandle på en annen måte, lar CamanJS deg også definere dine egne blandemoduser. Vi vil dekke dette i neste opplæring av serien.
Her er JavaScript-koden for å bruke forskjellige blandemoduser på et bilde:
$ ('# multiply-btn'). på ('klikk', funksjon (e) hexColor = $ ("# hex-color") .val (); Caman ("# lerret", funksjon tilbakestill (false); this.newLayer (function () this.fillColor (hexColor); this.setBlendingMode ('multiply');); this.render (););); $ ('# screen-btn'). på ('klikk', funksjon (e) hexColor = $ ("# hex-color") .val (); Caman ("# lerret", funksjon returnere (false); this.newLayer (function () this.fillColor (hexColor); this.setBlendingMode ('skjerm');); this.render ();););I det ovennevnte kodestykket får vi Hex-fargeværdien fra et inntastingsfelt. Denne fargen blir deretter påført på det nye laget. Du kan skrive koden for å bruke andre blandemoduser på lignende måte.
Prøv å spesifisere en farge etter eget valg i inntastingsfeltet, og bruk deretter blandingsmodusene ved å klikke på den respektive knappen. Jeg har brukt blandemodusene i en solid farge i eksemplet, men du kan også bruke dem på et overlaid bilde fra forrige del.
Hvis du lastet opp et stort bilde i enten demonstrasjonen til den første opplæringen eller den andre opplæringen, har du kanskje lagt merke til at resultatet av et brukt filter eller blandingsmodus ble tydelig etter en lang periode.
Store bilder har mange piksler, og det kan være svært tidkrevende å beregne den endelige verdien av forskjellige kanaler for hver piksel etter bruk av en bestemt blandingstilstand. For eksempel, når du bruker multiplisere blandingsmodus på et bilde med dimensjoner 1920 * 1080, må enheten utføre multiplikasjon og deling over 6 millioner ganger.
I slike tilfeller kan du bruke hendelser for å gi brukerne noen indikasjon på fremdriften i et filter eller en blandingstilstand. CamanJS har fem forskjellige hendelser som kan brukes til å utføre spesifikke tilbakeringingsfunksjoner på forskjellige stadier. Disse fem hendelsene er processStart, processComplete, renderFinished, blockStarted, og blockFinished.
De processStart og processComplete Hendelser utløses etter at et enkelt filter starter eller fullfører gjengivelsesprosessen. Når alle filtre du har angitt, er blitt brukt på et bilde, brann biblioteket av renderFinished begivenhet.
CamanJS deler store bilder i blokker før de begynner å manipulere dem. De blockStarted og blockFinished Hendelser blir sparket etter at enkelte blokker av bildet har blitt behandlet av biblioteket.
I vårt eksempel vil vi bare bruke processStart og renderFinished Hendelser for å informere brukerne om utviklingen av vår bildebehandlingsoperasjon.
Caman.Event.listen ("processStart", funksjon (prosess) $ ("prosess-melding"). Tekst ('Applikasjon' + process.name);); Caman.Event.listen ("renderFinished", funksjon () $ ("prosess-melding"). Tekst ("Ferdig!"););Med processStart og processFinish hendelser, får du tilgang til navnet på prosessen som for øyeblikket fungerer på bildet. De blockStarted og blockFinished Hendelser, derimot, gir deg tilgang til informasjon som totalt antall blokker, den nåværende blokken blir behandlet, og antall ferdige blokker.
Prøv å klikke på hvilken som helst knapp i demoen under, og du vil se navnet på prosessen som for tiden manipulerer bildet i området under lerretet.
Den første opplæringen av serien viste deg hvordan du lager et grunnleggende bilderedigeringsprogram med innebygde filtre fra CamanJS-biblioteket. Denne opplæringen viste deg hvordan du arbeider med mer enn ett lag og bruker forskjellige filtre og blandemoduser til hvert lag enkeltvis.
Siden bildetedigeringsprosessen kan ta en stund for store bilder, lærte vi også hvordan du kan indikere for brukerne at bildeditoren faktisk behandler bildet og ikke sitter tomgang.
I neste og siste opplæring av serien, lærer du hvordan du lager dine egne blandemoduser og filtre i CamanJS. Hvis du har spørsmål knyttet til denne opplæringen, kan du gjerne gi meg beskjed i kommentarene.
