Hvordan manipulere piksler med HTML5 Canvas Tag

Med HTML5, kan du trekke ut data fra et lerret tag inn i de underliggende pikseldata. Manipulere disse dataene gir deg stor kontroll over bildet i sanntid. Du kan bruke disse dataene for balansering farge samt for å eksperimentere med dine egne uklarheter, skjerper, og chroma key-effekter.

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

Denne koden endrer fargebalansen i et bilde:

funksjon draw () {
Var tegning = document.getElementById ("tegning");
Var con = drawing.getContext ("2d");
Var opprinnelig = document.getElementById ("original");
CANV_WIDTH = 200;
CANV_HEIGHT = 200;
// Trekke originalen på lerret
con.drawImage (original, 0, 0);
// Få bildedataene
imgData = con.getImageData (0, 0, 200, 200);
// Sløyfe gjennom bildedata
for (p = 0; rad <CANV_HEIGHT; rad ++) {
for (col = 0; col <CANV_WIDTH; col ++) {
// Finne aktuell piksel
index = (col + (rad * imgData.width)) * 4;
// Skille inn fargeverdier
r = imgData.data [index];
g = imgData.data [index + 1];
b = imgData.data [index + 2];
a = imgData.data [index + 3];
// Manipulere fargeverdier
r - = 20;
+ g = 50;
b - = 30;
A = A;
// Administrere grensebetingelser
if (r> 255) {
r = 255;
}
if (r <0) {
r = 0;
}
if (g> 255) {
g = 255;
}
if (g <0) {
g = 0;
}
if (b> 255) {
r = 255;
}
Hvis (b <0) {
b = 0;
}
if (a> 255) {
a = 255;
}
hvis (a <0) {
a = 0;
}
// Returnerer 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
} // End rad for loop
// Tegne nytt bilde på lerret
con.putImageData (imgData, 0, 0);
} // End funksjon

Mens koden oppføring virker ganske lenge, egentlig er det ikke så vanskelig å følge:

1. Tegn et originalt bilde.

   Teknikken du vil bruke utdrag data fra et lerret element, så å endre et bilde, må du først tegne det på et lerret. Du kan bruke vanlig drawImage () -metoden.

2. Pakk bildedataene.

   Den getImageData () -metoden får vises bildet av den nåværende lerret og plasserer det i et stort utvalg av heltall.

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

   Image data er delt inn i rader og kolonner. Hver rad går fra 0 til høyden på lerretet, så gjør en for loop å iterere gjennom radene.

4. Lag en annen sløyfe for å håndtere kolonnene.

   Inne i hver rad er nok data til å gå fra 0 til bredden av lerret, så foreta et nytt for løkke inne i den første. Det er veldig vanlig å bruke et par av nestet for løkker til å gå gjennom to-dimensjonale data som bildeinformasjon.

5. Finn indeksen i imageData for gjeldende rad og kolonne.

   Den imageData matrise inneholder fire heltall for hver piksel, så vi må gjøre litt matematikk for å finne ut hvor den første heltall for hver piksel er. Den enkleste formelen er å multiplisere radnummer med bredden av lerretet, legge det til kolonnenummeret, og multiplisere resultatet med hele fire.

6. Trekk de tilsvarende fargeverdiene fra indeksen.

   Indeksen representerer også den røde verdien av det eksisterende bildeelement. Den neste int holder grønn verdi, etterfulgt av den blå verdi, og til slutt den alfaverdi.

7. Manipulere fargeverdiene som du vil.

   Hvis du kommer til å gjøre en farge-balansering app, kan du bare legge til eller trekke fra verdier for å endre den generelle fargebalanse. Du kan også gjøre mye mer forseggjort arbeid hvis du ønsker å leke seg med pixel-nivå bildemanipulering.

8. Sjekk for grenser.

   En piksel verdien kan ikke være lavere enn 0 eller høyere enn 255, så sjekk for begge disse grensene og justere alle pikselverdiene til å være innenfor lovens grenser.

9. Returnere manipulert verdiene tilbake til imgData array.

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

10. Tegne bildedataene tilbake til lerretet.

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