Opprette en bildeditor ved hjelp av CamanJS Bruk av grunnleggende filtre

En stund tilbake skrev jeg noen opplæringsprogrammer som beskriver hvordan man bruker forskjellige typer filtre og blander moduser til et bilde ved hjelp av bare CSS. Dette kan være svært nyttig i situasjoner der du vil vise gråtonen, sløret eller høy kontrastversjon av det samme bildet. I stedet for å lage fire forskjellige bilder, kan du bare bruke disse effektene på det opprinnelige bildet ved hjelp av noen få linjer med CSS. 

Bruke CSS-filtre og blandingsmodus fungerer fint i de fleste tilfeller. CSS endrer imidlertid ikke bildene i selve bildet. Med andre ord er filtrene og blandingsmodusene eller andre effekter ikke permanente. 

Hvis noen laster ned et bilde med CSS-filtre som er brukt på det, vil de få det opprinnelige bildet og ikke den endrede versjonen. Dette kan være et stort tilbakeslag hvis du planla å skape et bilderedigeringsprogram for brukerne.

Hvis du vil at bildemodifikasjonene skal være permanente og la brukeren laste ned det endrede bildet, kan du bruke HTML5 lerret. De lerret elementet lar deg gjøre mange ting, inkludert tegningslinjer og former, skrive tekst og rendering av animasjoner. 

I denne opplæringen vil vi fokusere på å redigere bilder lastet på lerretet. CSS3 har allerede innebygd funksjonalitet slik at du kan bruke effekter som kontrast, lysstyrke og uskarphet direkte. Når vi jobber med HTML5 lerret, bruker vi et lerret manipulasjons bibliotek kalt CamanJS for å redigere bildene. 

Biblioteket støtter grunnleggende effekter som lysstyrke, kontrast og metning utenfor boksen. Dette vil spare tid og gi oss mulighet til å lage mer sofistikerte filtre basert på disse grunnleggende.

CamanJS Grunnleggende

Navnet på dette biblioteket er basert på det faktum at det brukes til å gjøre (ca) nvas (man) ipulation i JavaScript (JS). Før du kan begynne å bruke forskjellige funksjoner i biblioteket, må du inkludere det i prosjektet. Dette kan gjøres enten ved å laste ned biblioteket og hoste det selv eller ved å koble direkte til en CDN.

Det er to måter å bruke biblioteket på. Det første alternativet er å bruke data-caman Tilordne med bildeelementene dine. Denne egenskapen kan akseptere en kombinasjon av forskjellige CamanJS-filtre som verdi. Hvis du for eksempel vil øke lysstyrken på et bilde med 20 og kontrasten med 10, kan du bruke følgende HTML:

På samme måte kan du bruke andre filtre som metning, eksponering, støy, sepia, etc. I tillegg til de grunnleggende filtene, gir CamanJS deg også tilgang til noen mer sofistikerte filtre ut av esken. Disse filtrene kan brukes på et bilde på lignende måte. For å bruke soloppgang filter, kan du bare bruke følgende HTML:

Det andre alternativet for å manipulere bilder er ved å ringe Caman () med id av lerretet der du har gjengitt bildet og forskjellige filtre som du vil søke på det gjengitte bildet.

Caman ('# canvas-id', funksjon () this.brightness (20); this.contrast (10); this.render (););

I denne serien skal vi gå til JavaScript-måten for å lage vår bilderedigerer.

Implementere opplastings- og nedlastingsfunksjonalitet

Du må gi brukerne en måte å laste opp bildene de vil redigere, slik at du kan gjøre dem på lerretet for videre manipulering. Når brukerne har gjort endringene, bør de også kunne laste ned de redigerte bildene. I denne delen legger vi disse to funksjonene til bildebehandleren.

La oss begynne med HTML-koden for å legge til lerretet og laste opp / laste ned knappene:

   
 
  Last opp et bilde Last ned bilde 
 

Her er koden for implementering av grunnleggende bildeopplastingsfunksjonalitet:

var img = nytt bilde (); var lerret = document.getElementById ('lerret'); var ctx = canvas.getContext ('2d'); var filnavn = "; $ (" # opplastingsfil "). (" endre ", funksjon () var fil = document.querySelector ('# upload-file'). filer [0]; var leser = ny FileReader (); hvis (fil) fileName = file.name; reader.readAsDataURL (fil); leser.addEventListener ("load", funksjon () img = nytt bilde (); img.src = leser.result; img .onload = funksjon () canvas.width = img.width; canvas.height = img.height; ctx.drawImage (img, 0, 0, img.width, img.height); $ ("# lerret"). removeAttr ("data-caman-id");, false););

Vi begynner med å opprette noen variabler for å lagre navnet på bildefilen valgt av brukeren og konteksten for lerretet vårt. Deretter skriver vi koden for å få bildefilen fra filen inngang etter sin endring hendelsen er sparken. Filene som er valgt av en bruker, lagres i en Filelist, og vi kan hente den første filen fra listen ved hjelp av .filer [0]. 

Når vi har filen, bruker vi en Filereader motsette seg å lese innholdet i filen valgt av brukeren. De på Last arrangement for Filereader utløses etter at den valgte filen har blitt lest. 

Inne i på Last hendelseshåndterer for Filereader objekt, vi lager en HTMLImageElement eksempel ved bruk av Bilde() konstruktør. De src Attributtet til bildet blir deretter satt til verdien av resultategenskapen til vår Filereader. 

Når bildet har lastet inn vellykket, setter vi bredden og høyden på lerretet til lik bredde og høyde av bildet valgt av brukeren. Etter det tegner vi bildet på lerretet og fjerner data-caman-id attributt fra lerretet. 

Attributtet blir lagt til automatisk av CamanJS når du konfigurerer lerretet for redigering av et bilde. Vi må fjerne det hver gang en bruker velger en ny fil for å unngå blandingen mellom den gamle bildefilen vi redigerte og den nye filen valgt av brukeren.

I tillegg til å laste inn bildefilen i lerretet, har vi også satt verdien av filnavn variabel for å være lik navnet på filen valgt av brukeren. Dette vil være nyttig når vi lagrer det redigerte bildet.

Brukere vil nå kunne laste opp forskjellige bilder i bildeeditoren din. Når de har redigert bildet, vil de også gjerne laste dem ned. La oss skrive noen kode som lar brukerne lagre den redigerte bildefilen.

$ ('# download-btn'). på ('klikk', funksjon (e) var fileExtension = fileName.slice (-4); hvis (fileExtension == '.jpg' || fileExtension == '.png' ) var actualName = fileName.substring (0, fileName.length - 4); laste ned (lerret, actualName + '-edited.jpg');); funksjon nedlasting (lerret, filnavn) var e; var lnk = document.createElement ('a'); lnk.download = filnavn; lnk.href = canvas.toDataURL ("image / jpeg", 0.8); hvis (document.createEvent) e = document.createEvent ("MouseEvents"); e.initMouseEvent ("klikk", sant, sant, vindu, 0, 0, 0, 0, 0, false, false, false, false, 0, null); lnk.dispatchEvent (e);  annet hvis (lnk.fireEvent) lnk.fireEvent ("onclick"); 

Vi bruker jQuery .på() metode for å utføre et stykke kode hver gang klikk Hendelsen er avbrutt for nedlastningsknappen. Denne koden fjerner filutvidelsen fra navnet på bildefilen valgt av brukeren, og erstatter den med suffikset -edited.jpg. Dette navnet sendes deretter til nedlasting Fungerer sammen med en henvisning til lerretet der vi gjengitt og redigerte bildet. 

Nedlastingsfunksjonen oppretter en kobling og setter dens nedlasting tilskrive filnavn. De href Attributtet inneholder data URI for det redigerte bildet. Etter å ha satt inn verdien av disse to attributter, brann vi programhelt firehendelse for vår nyopprettede kobling. Dette klikket starter nedlastingen av det redigerte bildet.

Bruk av innebygde filtre

Som jeg nevnte i begynnelsen av opplæringen, kommer CamanJS med grunnleggende innebygde filtre. Så du kan direkte bruke lysstyrke, kontrast, sepia, metning, eksponering, støy, skjerp, vibrasjon og fargetone. Noen filtre som lysstyrke og kontrast kan ha en negativ så vel som en positiv verdi. 

Du kan gjøre verdiene så høye eller lave som du vil, men et fornuftig valg vil være å holde dem mellom -100 og 100. For eksempel blir bildet hvitt når du setter lysstyrken til 100. Så vil en verdi over 100 vilje være ubrukelig. På samme måte blir bildet helt grå hvis du setter verdien av kontrasten til -100.

Andre filtre som sepia, støy, skjerp og uskarphet vil bare godta en positiv verdi. Husk at fargetonen dekker hele 360 ​​gradersirkelen, med verdier fra 0 til 100. Bildet vil se nøyaktig ut på samme måte når du setter fargen på 0 eller 100.

Her er HTML for å legge til knapper for bildebehandleren:

 
 - lysstyrke + 
  
 - gamma + 
 
 
  Last opp et bilde Last ned bilde 
 Årgang  Lomo 

Alle filtre som lysstyrke og kontrast har fått økt og redusert knapper. Imidlertid er reduksjonsknappen deaktivert for noen filtre som støy fordi de ikke kan ha en meningsfull negativ verdi.

Vi vil bruke de respektive filtre basert på knappen klikket ved hjelp av følgende JavaScript.

/ * Lignende kode for alle andre knapper * / $ ('# brightness-inc'). ("Klikk", funksjon (e) Caman ('# lerret', img, funksjon () this.brightness .render (););); $ ('# brightness-dec'). på ('klikk', funksjon (e) Caman ('# lerret', img, funksjon () this.brightness (-10) .render ();); ); / * Lignende kode for alle innebygde filtre * / $ ('# nostalgia-btn'). På ('klikk', funksjon (e) Caman ('# lerret', img, funksjon () this.nostalgia gjengi (););); $ ('# majestetisk-btn'). på ('klikk', funksjon (e) Caman ('# lerret', img, funksjon () this.herMajesty (). render ();;;);

For å øke og redusere knappene, er filterets styrke basert på hvordan effekten skalerer. For eksempel økes lysstyrken og kontrasten med 10, men verdien av gamma økes kun med 0,1 etter hvert klikk.

Følgende CodePen-demo viser CamanJS-bildeditoren vi opprettet i handling.

Noen filtre kan ta litt tid før du ser deres endelige utfall. I slike tilfeller kan brukerne tro at filteret ikke virker. Vi bruker hendelser for å holde leserne oppdatert om fremdriften av et filter. Alt dette vil bli diskutert i neste opplæring.

Siste tanker

Den første opplæringen var ment å lære deg å lage et bilderedigeringsprogram med grunnleggende bildeopplasting og nedlastingsfunksjonalitet som brukerne kan bruke til å redigere bilder. Vi brukte grunnleggende filtre som støy, kontrast og lysstyrke, samt noen mer kompliserte effekter som Vintage og Nostalgi, som er bygd inn i biblioteket.

.