Canvas createImageData() metode

Canvas reference manual

Definition og brug

createImageData() Metode til at oprette et nyt tomt ImageData-objekt. Nye objekts standardpixelværdi er transparent black.

For hver pixel i ImageData-objektet findes der fire aspekter af information, nemlig RGBA-værdier:

  • R - Rød (0-255)
  • G - Grøn (0-255)
  • B - Blå (0-255)
  • A - alpha-kanal (0-255; 0 er gennemsigtig, 255 er fuldt synlig)

Derfor repræsenterer transparent black (0,0,0,0).

color/alpha findes som en array, og da arrayet indeholder fire informationer for hver pixel, er størrelsen på arrayet fire gange større end ImageData-objektet. (Der er en enklere måde at få arrayets størrelse på, nemlig ved at bruge ImageDataObject.data.length)

Arrayet, der indeholder color/alpha information, gemmes i ImageData-objektets data egenskaben.

Bemærk:Efter at have opereret på arrayets color/alpha information, kan du bruge putImageData() Metoden kopierer billeddataene tilbage til lærredet.

Eksempel:

Denne syntaks ændrer den første pixel i ImageData-objektet til rød:

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

Denne syntaks ændrer den anden pixel i ImageData-objektet til rød:

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

Eksempel

Opret et ImageData-objekt på 100*100 pixels, hvor hver pixel er rød, og sæt det på lærredet:

Din browser understøtter ikke HTML5 canvas-tagget.

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

Prøv det selv

Syntaks

Der er to versioner af createImageData() metoden:

1. Opret et nyt ImageData-objekt med den specificerede størrelse (målt i pixels):

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

2. Opret et nyt ImageData-objekt med samme størrelse som det specificerede ImageData-objekt (koperer ikke billeddata):

var imgData=context.createImageData(imageData);

Parameterværdi

Parameter Beskrivelse
width Bredden på ImageData-objektet, målt i pixels.
height Højden på ImageData-objektet, målt i pixels.
imageData En anden ImageData-objekt.

Browserunderstøttelse

Tal i tabellen angiver den første browserversion, der fuldt ud understøtter denne egenskab.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.

Canvas reference manual