HTML canvas createImageData() methode

HTML5 Canvas reference manual

Definitie en gebruik

createImageData() Method om een nieuwe lege ImageData-object te maken. De standaard pixelwaarde van het nieuwe object is transparent black.

Voor elk pixel in een 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 transparant, 255 is volledig zichtbaar)

Daarom betekent transparent black (0,0,0,0).

color/alpha bestaat als array en omdat het array vier stukken informatie per pixel bevat, is de grootte van het array vier keer zo groot als het ImageData object. (Er is een eenvoudiger manier om de arraygrootte te verkrijgen, namelijk met ImageDataObject.data.length)

Het array dat de color/alpha informatie bevat, wordt opgeslagen in de data eigenschappen gebruiken.

Tip:Na het bewerken van de color/alpha informatie in het array, kunt u putImageData() De methode kopieert de afbeeldingsgegevens terug naar het canvas.

Voorbeeld:

Deze syntaxis maakt de eerste pixel van het ImageData object rood:

imgData = ctx.createImageData(100, 100);
imgData.data[0] = 255;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;

Deze syntaxis maakt de tweede pixel van het ImageData object rood:

imgData = ctx.createImageData(100, 100);
imgData.data[4] = 0;
imgData.data[5] = 255;
imgData.data[6] = 0;
imgData.data[7] = 255;

Voorbeeld

Maak een ImageData object van 100*100 pixels aan, waarbij elke pixel rood is, en plaats het op het canvas:

Uw browser ondersteunt de HTML5 canvas tag niet.

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);

Probeer het zelf

Syntaxis

Er zijn twee versies van de createImageData() methode:

1. Create a new ImageData object with the specified size (in pixels):

var imgData=context.createImageData(width,height);

2. Create a new ImageData object with the specified size (in pixels) (without copying image data):

var imgData=context.createImageData(imageData);

Parameter value

Parameter Description
width The width of the ImageData object, in pixels.
height The height of the ImageData object, in pixels.
imageData Another ImageData object.

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