HTML canvas getImageData() metoden

HTML5 Canvas reference manual

Definition og brug

getImageData() Metoden returnerer et ImageData-objekt, der kopierer pixeldataene for den specificerede rektangel på canvaset.

For hver pixel i ImageData-objektet findes der fire typer informationer, nemlig RGBA-værdier:

  • R - Rød (0-255)
  • G - Grøn (0-255)
  • B - Blå (0-255)
  • A - alpha-kanal (0-255; 0 er gennemsigtig, 255 er helt synlig)

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

Tip:Efter at have håndteret farve/alpha-informationerne i arrayet, kan du bruge putImageData() Metoden kopierer billeddataene tilbage til canvaset.

Eksempel:

Følgende kode kan få adgang til farve/alpha-informationen for den første pixel i den returnerede ImageData-objektet:

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

Try it yourself

Tip:Du kan også bruge getImageData() metoden til at ændre farven på hver pixel i et bestemt billede på canvaset.

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

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

Se nedenstående "Prøv det selv"-eksempel.)

Eksempel

Eksempel 1

Følgende kode kopierer pixels fra en specificeret rektangel på canvaset ved hjælp af getImageData() og sætter dem 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);
}

Try it yourself

Tip:Flere eksempler findes på siden i bunden.

Syntaks

var imgData=context.getImageData(x,y,bredde,højde);

Parameter værdi

Parameter Beskrivelse
x x-koordinaten for det øverste venstre punkt i kopieringsområdet.
y y-koordinaten for det øverste venstre punkt i kopieringsområdet.
bredde Bredden på den rektangulære område, der skal kopieres.
højde Højden på den rektangulære område, der skal kopieres.

Flere eksempler

Eksempel 2

Brugt billede:

Tulip

Brug getImageData() til at ændre farven på hver pixel på canvaset.

Din browser understøtter ikke HTML5 canvas tag.

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);
// ændre farve
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);

Try it yourself

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

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

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

HTML5 Canvas reference manual