HTML-canvas createImageData() Methode

Voorbeeld

Maak een ImageData-object van 100*100 pixels waarbij elke pixel rood is en plaats het op het 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 methode volledig ondersteunt.

Method
createImageData()	Yes	9.0	Yes	Yes	Yes

Definitie en gebruik

De methode createImageData() maakt een nieuw, leeg ImageData-object. De pixelwaarden van het nieuwe object zijn standaard transparant zwart.

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)

Transparant zwart geeft dus aan: (0,0,0,0).

De kleur/alfa-informatie wordt in een array bewaard en aangezien de array 4 stukjes informatie voor elke pixel bevat, is de array vier keer zo groot als het ImageData-object: width*height*4. (Een eenvoudigere manier om de grootte van de array te vinden, is door ImageDataObject.data.length te gebruiken)

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

Tip: Nadat u de kleur/alfa-informatie in de array hebt gemanipuleerd, kunt u de afbeeldingsgegevens terug naar het canvas kopiëren met de methode putImageData() .

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;

JavaScript-syntaxis

Er zijn twee versies van de methode createImageData():

1. Hiermee wordt een nieuw ImageData-object gemaakt met de opgegeven afmetingen (in pixels):

JavaScript-syntaxis:	var imgData= context .createImageData ( breedte, hoogte );

2. Hiermee wordt een nieuw ImageData-object gemaakt met dezelfde afmetingen als het object dat is opgegeven door een andereImageData (dit kopieert de afbeeldingsgegevens niet):

JavaScript syntax:	var imgData=context.createImageData(imageData);

Parameterwaarden

Parameter	Description
width	The width of the new ImageData object, in pixels
height	The height of the new ImageData object, in pixels
imageData	anotherImageData object

❮ HTML Canvas-referentie