HTML-canvas ImageData -gegevens Eigenschap

Voorbeeld

Maak een 100*100 pixels ImageData-object waarbij elke pixel is ingesteld op de kleur rood:

Canvas

javascript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
for (i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);

Browserondersteuning

De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.

Property
data	Yes	9.0	Yes	Yes	Yes

Definitie en gebruik

De eigenschap data retourneert een object dat afbeeldingsgegevens van het opgegeven ImageData-object bevat.

Voor elke pixel in een ImageData-object zijn er vier stukjes informatie, de RGBA-waarden:

R - De kleur rood (van 0-255)
G - De kleur groen (van 0-255)
B - De kleur blauw (van 0-255)
A - Het alfakanaal (van 0-255; 0 is transparant en 255 is volledig zichtbaar)

De kleur/alfa-informatie wordt bewaard in een array en wordt opgeslagen in de eigenschap data van het ImageData-object.

Voorbeelden:

De syntaxis om de eerste pixel in het ImageData-object rood te maken:

imgData=ctx.createImageData(100, 100);

imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

De syntaxis om de tweede pixel in het ImageData-object groen te maken:

imgData = ctx.createImageData(100, 100);

imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

Tip: Kijk naar createImageData() , getImageData() en putImageData() voor meer informatie over het ImageData-object.

JavaScript-syntaxis

JavaScript-syntaxis:	imageData .data;

❮ HTML Canvas-referentie