Share
I den første opplæringen av CamanJS-bildeditor-serien brukte vi bare innebygde filtre for å redigere bildene våre. Dette begrenset oss til noen grunnleggende effekter som lysstyrke, kontrast og 18 andre mer kompliserte filtre med navn som Vintage, Sunrise, etc. De var alle enkle å søke på, men vi var ikke i full kontroll over de enkelte pikslene av bildet vi ønsket å redigere.
I den andre opplæringen lærte vi om lag og blandemodus, noe som ga oss mer kontroll over bildene vi redigerte. Du kan for eksempel legge til et nytt lag på lerretet, fylle det med en farge eller et bilde, og legg det over overordnet laget med en blandingstilstand som er brukt på den. Imidlertid skapte vi fremdeles ikke våre egne filtre, og blandingsmodusene vi kunne søke var begrenset til de som allerede ble levert av CamanJS.
Målet med denne opplæringen er å lære deg å lage dine egne blandemoduser og filtre. Vi vil også ta opp noen feil som finnes i biblioteket og hvordan du kan lappe dem når du bruker CamanJS i dine egne prosjekter.
Som standard tilbyr CamanJS ti blandingsmoduser. Disse er normale, formere, skjerm, overlegg, forskjell, tillegg, ekskludering, softLight, lys og mørkere. Biblioteket lar deg også registrere dine egne blandemoduser. På denne måten kan du kontrollere hvordan de tilsvarende pikslene i dagens lag og overordnet lag blandes for å produsere sluttresultatet.
Du kan opprette en ny blandingstilstand ved hjelp av Caman.Blender.register ( "blend_mode", tilbakeringings);. Her, blend_mode er navnet du vil bruke for å identifisere blandingstilstanden du lager. Tilbakeringingsfunksjonen godtar to parametere som inneholder RGB-verdiene for forskjellige piksler på det aktuelle laget og tilsvarende piksler på overordnet laget. Funksjonen returnerer et objekt med sluttverdier for rgb kanaler.
Her er et eksempel på en tilpasset blandingsmodus som setter verdien av de enkelte kanalene til en piksel til 255 hvis verdien av den kanalen for den tilsvarende piksel i overordnet laget er over 128. Hvis verdien er under 128, vil den endelige kanalverdien er resultatet av å trekke den gjeldende lagkanalverdien fra foreldrekanalverdien. Navnet på denne blandingsmodusen er maxrgb.
Accentsconagua
Caman.Blender.register ("maxrgb", funksjon (rgbaLayer, rgbaParent) retur r: rgbaParent.r> 128? 255: rgbaParent.r - rgbaLayer.r, g: rgbaParent.g> 128? 255: rgbaParent.g - rgbaLayer.g, b: rgbaParent.b> 128? 255: rgbaParent.b - rgbaLayer.b;);La oss lage en annen blandingstilstand på samme måte. Denne gangen vil de endelige kanalverdiene bli satt til 0 hvis kanalverdien for den tilsvarende piksel i overordnet laget er større enn 128. Hvis kanalverdien for overordnet laget er mindre enn 128, vil sluttresultatet være tillegg av Kanalverdiene for det aktuelle laget og overordnet laget av den bestemte piksel. Denne blandingsmodusen er oppkalt minrgb.
Caman.Blender.register ("minrgb", funksjon (rgbaLayer, rgbaParent) return r: rgbaParent.r < 128 ? rgbaParent.r + rgbaLayer.r : 0, g: rgbaParent.g < 128 ? rgbaParent.g + rgbaLayer.r : 0, b: rgbaParent.b < 128 ? rgbaParent.r + rgbaLayer.r : 0 ; );Du bør prøve å lage dine egne blandemoduser for å øve.
Det er to brede kategorier av filtre i CamanJS. Du kan enten operere på hele bildet ett bildepunkt om gangen, eller du kan endre et bilde ved hjelp av en konvolusjonskjerne. En konvolusjonskjerne er en matrise som bestemmer fargen til en bestemt piksel basert på pikslene rundt den. I denne delen fokuserer vi på pikselbaserte filtre. Kernelmanipulasjoner vil bli dekket i neste avsnitt.
Pixelbaserte filtre gis verdien av RGB-kanaler for en pixel av gangen. De endelige RGB-verdiene for den aktuelle pixel påvirkes ikke av de omkringliggende pikslene. Du kan lage dine egne filtre ved hjelp av Caman.Filter.register ( "FILTER_NAME", tilbakeringings);. Ethvert filter du lager, må ringe til prosess() metode. Denne metoden aksepterer filternavnet og en tilbakeringingsfunksjon som parametere.
Følgende kodestykke viser deg hvordan du oppretter et pikselbasert filter som gjør bildene gråtoner. Dette gjøres ved å beregne luminescensen til hver piksel og deretter sette verdien av individuelle kanaler til å være lik den beregnede luminescensen.
Caman.Filter.register ("gråskala", funksjon () this.process ("gråskala", funksjon (rgba) var lumin = (0.2126 * rgba.r) + (0,7152 * rgba.g) + (0,0722 * rgba .b); rgba.r = lumin; rgba.g = lumin; rgba.b = lumin;); returner dette;);Du kan opprette et terskelfilter på samme måte. Denne gangen vil vi tillate brukerne å sende en grenseverdi. Hvis lysstyrken til en bestemt piksel er over grensen for brukeren, blir den piksen hvit. Hvis lysstyrken til en bestemt piksel er mindre enn grensen for brukeren, blir piksen svart.
Caman.Filter.register ("terskel", funksjon (grense) this.process ("threshold", funksjon (rgba) var lumin = (0.2126 * rgba.r) + (0,7152 * rgba.g) + (0,0722 * rgba.r = lumin> grense? 255: 0; rgba.g = lumin> grense? 255: 0; rgba.b = lumin> grense? 255: 0;); returner dette;);Som en øvelse bør du prøve å lage dine egne pikselbaserte filtre som for eksempel øke verdien for en bestemt kanal på alle piksler.
I stedet for å manipulere fargen på den nåværende piksel, kan CamanJS også sette fargen for piksler på absolutte og relative steder. Dessverre er denne oppførselen litt buggy, så vi må omskrive noen metoder. Hvis du ser på kilden til biblioteket, vil du legge merke til at metoder som getPixel () og putPixel () ring metodene coordinatesToLocation () og locationToCoordinates () på dette. Imidlertid er disse metodene ikke definert på prototypen, men på selve klassen.
Et annet problem med biblioteket er at putPixelRelative () Metoden bruker variabelnavnet nowLoc i stedet for newLoc på to forskjellige steder. Du kan bli kvitt begge disse problemene ved å legge til følgende kode i skriptet.
Caman.Pixel.prototype.coordinatesToLocation = Caman.Pixel.coordinatesToLocation Caman.Pixel.prototype.locationToCoordinates = Caman.Pixel.locationToCoordinates Caman.Pixel.prototype.putPixelRelative = funksjon (horiz, vert, rgba) var newLoc; hvis (this.c == null) kaste "Krever en CamanJS-kontekst"; newLoc = this.loc + (this.c.dimensions.width * 4 * (vert * -1)) + (4 * horiz); hvis (newLoc> this.c.pixelData.length || newLoc < 0) return; this.c.pixelData[newLoc] = rgba.r; this.c.pixelData[newLoc + 1] = rgba.g; this.c.pixelData[newLoc + 2] = rgba.b; this.c.pixelData[newLoc + 3] = rgba.a; return true; ;
Når du har korrigert koden, bør du nå kunne opprette et filter som er avhengig av putPixelRelative () uten problemer. Her er et slikt filter som jeg opprettet.
Caman.Filter.register ("slettet", funksjon (juster) this.process ("slettet", funksjon (rgba) if (Math.random () < 0.25) rgba.putPixelRelative(2, 2, r: 255, g: 255, b: 255, a: 255 ); ); return this; );Dette filteret angir tilfeldig verdien av piksler to rader opp og to kolonner til høyre for den nåværende piksel til hvit. Dette sletter deler av bildet. Derav navnet på filteret.
Som nevnt tidligere, lar CamanJS deg lage egendefinerte filtre hvor fargen på den nåværende pixel bestemmes av pikslene rundt den. I utgangspunktet går disse filtrene over hver piksel i bildet du redigerer. En piksel i bildet vil være omgitt av åtte andre piksler. Verdiene av disse ni pikslene fra bildet multipliseres med de tilsvarende oppføringene i konvolusjonsmatrisen. Alle disse produktene blir deretter lagt sammen for å få den endelige fargeværdien for piksel. Du kan lese om prosessen mer detaljert i GIMP-dokumentasjonen.
Akkurat som pikselbaserte filtre, kan du definere dine egne kjernemanipuleringsfiltre ved hjelp av Caman.Filter.register ( "FILTER_NAME", tilbakeringings);. Den eneste forskjellen er at du nå skal ringe processKernel () inne i tilbakeringingsfunksjonen.
Her er et eksempel på å lage et pregfilter ved hjelp av kjernemanipulering.
Caman.Filter.register ("emboss", funksjon () this.processKernel ("emboss", [-2, -1, 0, -1, 1, 0, 1, 2]););Følgende CodePen-demo vil vise alle filtre som vi opprettet i denne opplæringen i bruk.
I denne serien har jeg dekket nesten alt som CamanJS har å tilby når det gjelder lerretsbasert bilderedigering. Du bør nå kunne bruke alle de innebygde filtre, lage nye lag, bruke blandingsmodi på disse lagene, og definer dine egne blandemoduser og filterfunksjoner.
Du kan også gå gjennom guiden på CamanJS nettsiden for å lese om alt jeg kanskje har savnet. Jeg vil også anbefale at du leser kildekoden til biblioteket for å lære mer om bildemanipulering. Dette vil også hjelpe deg med å avdekke eventuelle andre feil i biblioteket.
