HTML canvas getImageData() methode

HTML5 Canvas reference manual

Definitie en gebruik

getImageData() De methode retourneert een ImageData-object, dat de pixelgegevens van het gedefinieerde rechthoekige gebied van het canvas kopieert.

Voor elk pixel in het ImageData-object bestaan er vier soorten informatie, namelijk de RGBA-waarden:

  • R - rood (0-255)
  • G - groen (0-255)
  • B - blauw (0-255)
  • A - alpha-kanaal (0-255; 0 is doorschijnend, 255 is volledig zichtbaar)

color/alpha bestaat als een array en wordt opgeslagen in het ImageData-object van data eigenschappen gebruiken.

Tip:Na het uitvoeren van de operatie op de color/alpha-informatie in het array, kun je putImageData() De methode kopieert de afbeeldingsgegevens terug naar het canvas.

Voorbeeld:

Hiermee kan je de kleur/alpha-informatie van het eerste pixel van het geretourneerde ImageData-object verkrijgen:

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

Try it yourself

Tip:U kunt ook de getImageData() methode gebruiken om de kleuren van elke pixel van een bepaalde afbeelding op het canvas om te keren.

Gebruik deze formule om alle pixels te doorlopen en hun kleurwaarden te wijzigen:

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

(Zie onderstaande "Probeer het zelf" voorbeeld.)

Voorbeeld

Voorbeeld 1

De volgende code kopieert de pixelgegevens van een specifieke rechthoek op het canvas met getImageData() en plaatst de afbeeldingsgegevens terug op het canvas met 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:Meer voorbeelden worden aangeboden aan de onderkant van de pagina.

Syntax

var imgData=context.getImageData(x,y,breedte,hoogte);

Parameterwaarde

Parameter Beschrijving
x X-coördinaat van de linkerbovenhoek van het begin van de kopie.
y Y-coördinaat van de linkerbovenhoek van het begin van de kopie.
breedte Breedte van het rechthoekige gebied dat moet worden gekopieerd.
hoogte Hoogte van het rechthoekige gebied dat moet worden gekopieerd.

Meer voorbeelden

Voorbeeld 2

Te gebruiken afbeelding:

De Tulp

Gebruik getImageData() om de kleuren van elke pixel van het canvas om te keren.

Uw browser ondersteunt de HTML5 canvas tag niet.

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);
// kleur omkeren
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