Bygg et lærredbildeditor med lerret

Deretter initialiserer vi to variabler, men setter deres verdier til null for tiden. Disse brukes til å lagre bredden og høyden som resizable er endret til når den er endret. Disse variablene vil bli fylt og brukt senere i funksjonen. De XPOS og ypos Variabler brukes til å plassere et verktøytips som vi oppretter i et øyeblikk. De plasserer verktøytipset 5 piksler fra venstre kant og toppkanten av lerretet.

Deretter initialiserer vi resizable ved hjelp av jQuery brukergrensesnitt skalerbar () metode. Vi konfigurerer resizable for å få sitt aspektforhold låst; bildet vårt er firkantet, så vi vil at det skal forbli firkantet, uansett størrelse det er endret til. Vi sikrer også at bildet ikke kan økes i størrelse slik at kvaliteten på bildet blir beholdt. Hvis bildet ble forstørret i stedet for å bli krympet, ville det bli blokkert. De maxWidth og maxHeight Konfigurasjonsalternativene sikrer at bildet bare kan gjøres mindre. Begge er satt til henholdsvis bredde og høyde på lerretet.

Den resizable komponenten har noen tilpassede hendelseshåndterere som vi kan tilordne funksjoner som vil bli utført når disse tilpassede hendelsene blir sparket. Vi bruker to av disse hendelsesbehandlerne for dette eksempelet; endre størrelse på, som vil bli avfyrt hver gang resizable er endret, og Stoppe som avfyres når resizable er ferdig med å bli omformet.

Funksjonen for å endre størrelse kan motta to argumenter; Den første er et hendelsesobjekt, som vi ikke trenger å bruke i dette eksemplet, men som må deklareres for å kunne benytte seg av det andre argumentet, som vi trenger. Det andre argumentet er et objekt som inneholder nyttig informasjon om resizable, inkludert størrelsen den er blitt endret til. Det første vi gjør i denne funksjonen, er å tilordne den nye størrelsen på resizable til vår resizeWidth og resizeHeight variabler ved hjelp av egenskapene til ui protester mot at funksjonen mottar.

Det siste som denne funksjonen gjør er å opprette verktøytipset som forteller brukeren hvor stor resizable som er for øyeblikket. Hvis dette verktøytipset allerede eksisterer, trenger vi ikke å gjenskape det og kan bare sette sin indre tekst til en streng som viser gjeldende størrelse på resizable. Hvis verktøytipset ikke allerede eksisterer, for eksempel første gang resizable er endret, oppretter vi det fra grunnen av. Verktøytipset er plassert ved hjelp av XPOS og ypos som vi opprettet tidligere. Strengen er bygget fra begynnelsen hver gang resizable endrer størrelsen. Verktøytipset vil se slik ut:

Stopp-funksjonen, som utføres en gang når resize-interaksjonen avsluttes, oppretter først et nytt dialogelement som kontrollerer at den besøkende vil bruke den nye størrelsen på lerretet. Enda en gang er dialogboksen konfigurert slik at den ikke kan resizable seg selv og slik at den er modal. Vi legger også til noen knapper til denne dialogen. Den første er a Avbryt knappen, som gjør det mulig for besøkende å gå ut av resize-operasjonen uten å bruke den nye størrelsen. Alt vi gjør her er litt housekeeping, fjerner dialogboksen, resizable og verktøytipset.

Vi lager også en Ja knappen som gjelder den nye størrelsen. Vi gjør også de samme husholdningsoppgaver her, men da bruker vi den nye størrelsen vi oppretter et nytt bilde en gang til på samme måte som vi har gjort flere ganger allerede. Det er ekstremt enkelt å sette inn den nye størrelsen på lerretet. Vi leverer bare verdiene som resizable ble endret til bredden og høydeegenskapene til lerretelementet. Her er dialogboksen, som fremstår som den samme som lagringsdialogen fra tidligere, bare med annet innhold:

Endre rgb-verdiene for individuelle piksler

Jeg sa tidligere at vi har fullstendig pikselnivåkontroll av innholdet i lerretelementet, slik at våre to siste verktøylinjeknappfunksjoner vil gjøre akkurat det. Den første funksjonen brukes til å konvertere bildet til gråtoner, den andre endrer bildet til sepia tone. Vi ser først på gråtoner-funksjonen:

gråtoner: funksjon () // få bildedata var imgData = context.getImageData (0, 0, editor.width, editor.height), pxData = imgData.data, lengde = pxData.length; for (var x = 0; x < length; x+=4)  //convert to grayscale var r = pxData[x], g = pxData[x + 1], b = pxData[x + 2], grey = r * .3 + g * .59 + b * .11; pxData[x] = grey; pxData[x + 1] = grey; pxData[x + 2] = grey;  //paint grayscale image back context.putImageData(imgData, 0, 0); ,

Det første som denne funksjonen må gjøre er å få de nåværende pikseldataene på lerretet. Vi bruker getImageData () metode for å gjøre dette. Denne metoden godtar fire argumenter, som er de samme som clearRect () Metode som vi så på tidligere - de to første argumentene er x og y posisjoner for å begynne å samle data fra og den tredje og fjerde er bredden og høyden av området for å få. Vi ønsker hele lerretet slik at vi starter ved 0,0 (øverst til venstre) og fortsetter for bredde og høyde på lerretet. Den resulterende gjenstanden returnert med metoden er lagret i imgData variabel.

Objektet som er lagret i denne variabelen, har en eiendom som kalles data; innenfor denne egenskapen er en matrise som inneholder r g b og alfa verdier for hver enkelt piksel i lerretet, så det første elementet i arrayet vil inneholde r verdien av den første piksel, det andre elementet inneholder g verdien av den første piksel, den tredje inneholder b verdien av den første piksel, og den fjerde gjenstanden inneholder alfaværdien til knyttnepikselen. Denne serien er utrolig stor; en 480 x 480 pixel bilde inneholder 230400 piksler og vi har fire elementer for hver enkelt pixel. Dette gjør arrayet totalt 921600 varer i lengden! Denne lengden lagres også for bruk i til sløyfe som vi definerer neste.

For-sløyfen er litt annerledes enn vanlig for sløyfer. Husk at arrayet kan organiseres i diskrete blokker med 4 elementer, hvor hvert element i en enkelt blokk refererer til de enkelte rgba-komponentene, så vi slår gjennom gruppen fire elementer om gangen. På hver iterasjon får vi hver pikselkomponent og bruker deretter formelen r * .3 + g * .59 + b * .11 å konvertere hver til gråtoner. Vi lagrer deretter den konverterte pixelkomponenten tilbake til sin opprinnelige matrise.

Når vi har slått over hele oppstillingen, kan vi skrive arrayinnholdet tilbake til lerretet, erstatte hver originalpiksel med sin nye gråtoner-motpart ved hjelp av putImageData () metode, som ganske enkelt gjør det motsatte av getImageData ().

Sepia-tone-funksjonen er identisk med gråskala-funksjonen, bortsett fra at vi bruker en annen formel for å konvertere hver r g b komponent til sepia tone:

sepia: funksjon () // få bilde data var imgData = context.getImageData (0, 0, editor.width, editor.height), pxData = imgData.data, lengde = pxData.length; for (var x = 0; x < length; x+=4)  //convert to grayscale var r = pxData[x], g = pxData[x + 1], b = pxData[x + 2], sepiaR = r * .393 + g * .769 + b * .189, sepiaG = r * .349 + g * .686 + b * .168, sepiaB = r * .272 + g * .534 + b * .131; pxData[x] = sepiaR; pxData[x + 1] = sepiaG; pxData[x + 2] = sepiaB;  //paint sepia image back context.putImageData(imgData, 0, 0); 

Her er et bilde av bildet når det er blitt konvertert til sepia tone:

Konklusjon

I denne opplæringen har vi sett hvordan lerretet kan omdannes til et kraftig bilderedigeringsprogram som gir oss noen av funksjonene til de grunnleggende applikasjonsbaserte bildeditorene som vi er kjent med. Dette eksempelet kan enkelt utvides for å legge til andre funksjoner, for eksempel beskjæring og tegning med et blyantverktøy, selv om jeg vil legge til tillegget av denne funksjonaliteten til deg. Takk for at du leste.