Canvas getImageData() metoden

Canvas reference manual

Definition og brug

getImageData() Metoden returnerer et ImageData objekt, der kopierer pixeldataene for den angivne rektangel på canvas.

For hver pixel i ImageData objektet findes der fire aspekter af information, nemlig RGBA værdierne:

  • R - rød (0-255)
  • G - grøn (0-255)
  • B - blå (0-255)
  • A - alpha kanal (0-255; 0 er gennemsigtig, 255 er fuldt synlig)

color/alpha findes som et array og gemmes i ImageData objektets data egenskaben.

Tip:Efter at have opereret med color/alpha informationerne i arrayet, kan du bruge putImageData() Metoden kopierer billeddataene tilbage til canvas.

Eksempel:

Følgende kode kan få color/alpha informationen for den første pixel i den returnerede ImageData objekt:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

Prøv det selv

Tip:Du kan også bruge getImageData() metoden til at omvendte farven på hver pixel af et billede på canvas.

Brug denne formel til at gennemgå alle pixel og ændre deres farveværdi:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

Se venligst eksemplet nedenfor under "Prøv selv".

Eksempel

Eksempel 1

Følgende kode kopierer de angivne pixels data fra canvaset ved hjælp af getImageData() og lægger det tilbage på canvaset med putImageData():

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy()
{
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}

Prøv det selv

Tip:Flere eksempler findes i bunden af siden.

Syntaks

var imgData = context.getImageData(x,y,width,height);

Parameter værdi

Parameter Beskrivelse
x X-koordinaten for det øverste venstre punkt, hvor kopiering skal starte.
y Y-koordinaten for det øverste venstre punkt, hvor kopiering skal starte.
width Bredden på den rektangulære område, der skal kopieres.
height Højden på den rektangulære område, der skal kopieres.

Flere eksempler

Eksempel 2

Brugte billeder:

Tulip

Brug getImageData() til at omdrej hver pixels farve på canvaset.

Din browser understøtter ikke HTML5 canvas-tagget.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 0, 0);
var imgData=ctx.getImageData(0, 0, c.width, c.height);
// Omdrej farver
for (var i = 0; i < imgData.data.length; i += 4)
  {
  imgData.data[i] = 255 - imgData.data[i];
  imgData.data[i + 1] = 255 - imgData.data[i + 1];
  imgData.data[i + 2] = 255 - imgData.data[i + 2];
  imgData.data[i + 3] = 255;
  }
ctx.putImageData(imgData, 0, 0);

Prøv det selv

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.

Canvas reference manual