Hvordan manipulere piksler med HTML5 Canvas Tag - dummies

Med HTML5 kan du trekke ut dataene fra et lerret-tag i de underliggende pixeldataene. Manipulering av disse dataene gir deg omfattende kontroll over bildet ditt i sanntid. Du kan bruke disse dataene til fargebalanse, samt for å eksperimentere med dine egne blurs, skarphet og krom-nøkkel effekter.

Uansett hvilket format et bilde er lagret i på filsystemet, vises det som en liste over piksler. Hver piksel er representert (i standard 32-bits system, uansett) med fire heltall: RGBA. R representerer hvor mye rød er i gjeldende punkt, G står for grønt, og B står for blå. A står for alfa, som er et mål for gjennomsiktigheten av bildet. Hver av disse verdiene kan variere fra 0 til 255. Når du konverterer et bilde til bildedataformatet, får du et stort utvalg av heltall. Hver gruppe på fire bilder representerer en enkelt piksel med fargedata.

Denne koden endrer fargebalansen til et bilde:

funksjonstegn () {var drawing = document. getElementById ("drawing"); var con = tegning. getContext ("2D"); var original = dokument. getElementById ("originale"); CANV_WIDTH = 200; CANV_HEIGHT = 200; // tegne originalen på lerretskonfigurasjonen. drawImage (original, 0, 0); // få bildedataene imgData = con. getImageData (0, 0, 200, 200); // loop gjennom bildedata for (rad = 0; rad  255) {r = 255;} hvis (r 255) {g = 255;} hvis g 255) Hvis (b <0) {b = 0;} hvis (a> 255) {a = 255;} hvis (a <0) {a = 0;} // returnere nye verdier til data imgData. data [index] = r; imgData. data [index + 1] = g; imgData. data [index + 2] = b; imgData. data [index + 3] = a;} // end col for loop} // ende rad for loop // tegne nytt bilde på canvas con. putImageData (imgData, 0, 0);} // endefunksjonen

Mens kodelisten virker ganske lang, er det egentlig ikke så vanskelig å følge:

1. Tegn et originalt bilde.

   Teknikken du vil bruke, trekker ut data fra et lerretelement, for å endre et bilde, må du først tegne det på et lerret. Du kan bruke den vanlige drawImage () -metoden.

2. Trekk ut bildedataene.

   Metoden getImageData () får bildet som vises av gjeldende lerret og plasserer det i et stort antall heltal.

3. Lag en løkke for å håndtere radene.

   Bildedata er brutt inn i rader og kolonner. Hver rad går fra 0 til lerretets høyde, så gjør en for sløyfe for å iterere gjennom radene.

4. Lag en annen løkke for å håndtere kolonnene.

   Inne i hver rad er det nok data å gå fra 0 til lerretets bredde, så gjør et sekund for sløyfe inne i det første.Det er veldig vanlig å bruke et par nestede løkker for å gå gjennom todimensjonale data som bildeinformasjon.

5. Finn indeksen i imageData for den nåværende raden og kolonnen.

   ImageData-oppstillingen inneholder fire heltall for hver piksel, så vi må gjøre litt matte for å finne ut hvor det første heltallet for hver piksel er. Den enkleste formelen er å multiplisere radnummeret med bredden på lerretet, legg det til kolonnenummeret, og multipliser hele resultatet med fire.

6. Trekk tilsvarende fargeværdier fra indeksen.

   Indeksen representerer også den røde verdien av den nåværende pixel. Neste int har den grønne verdien, etterfulgt av den blå verdien, og til slutt alfaverdien.

7. Manipulere fargeverdiene som du vil.

   Hvis du skal gjøre en fargebalanseringsapp, kan du bare legge til eller trekke verdier for å endre den totale fargebalansen. Du kan også gjøre mye mer forseggjort arbeid hvis du ønsker å leke med pixel-nivå bildemanipulering.

8. Kontroller grenser.

   En pixelverdi kan ikke være lavere enn 0 eller høyere enn 255, så sjekk for begge disse grensene og juster alle pikselverdier som ligger innenfor lovlige grenser.

9. Returner manipulerte verdier tilbake til imgData-arrayen.

   Du kan kopiere verdier tilbake til matrisen, og du bør gjøre det for å gjøre endringene synlige.

10. Tegn bildedataene tilbake til lerretet.

    Funksjonen putImageData () trekker gjeldende bildedata tilbake til lerretet som et vanlig bilde. Den nye versjonen av bildet vil gjenspeile endringene.