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);
for (var 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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)
Dus transparant zwart geeft 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 |
❮ Canvasobject