Canvas createImageData() Methode

Canvas-Referenzhandbuch

Definition und Verwendung

createImageData() Methode, um einen neuen leeren ImageData-Objekt zu erstellen. Der Standardwert der neuen Pixel ist transparenter Schwarz.

Für jeden Pixel im ImageData-Objekt gibt es vier Arten von Informationen, nämlich die RGBA-Werte:

  • R - Rot (0-255)
  • G - Grün (0-255)
  • B - Blau (0-255)
  • A - Alpha-Kanal (0-255; 0 ist transparent, 255 ist vollständig sichtbar)

Daher bedeutet transparenter Schwarz (0,0,0,0).

color/alpha existiert in Form eines Arrays und da das Array vier Informationen pro Pixel enthält, ist seine Größe viermal so groß wie die des ImageData-Objekts. (Es gibt eine einfachere Methode, um die Größe des Arrays zu erhalten, nämlich durch die Verwendung von ImageDataObject.data.length)

Das Array mit den color/alpha-Informationen wird im ImageData-Objekt data Eigenschaften verwendet werden.

Hinweis:Nachdem die color/alpha-Informationen im Array abgearbeitet wurden, können Sie putImageData() Die Methode kopiert die Bilddaten zurück auf die Leinwand.

Beispiel:

Diese Syntax ändert den ersten Pixel des ImageData-Objekts in Rot:

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

Diese Syntax ändert den zweiten Pixel des ImageData-Objekts in Rot:

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

Beispiel

Erstellen Sie ein ImageData-Objekt von 100x100 Pixeln, bei dem jeder Pixel rot ist, und legen Sie es auf die Leinwand:

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

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

Versuchen Sie es selbst

Syntax

Es gibt zwei Versionen der Methode createImageData():

1. Erstellen Sie ein neues ImageData-Objekt mit der angegebenen Größe (in Pixeln):

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

2. Erstellen Sie ein neues ImageData-Objekt mit der gleichen Größe wie das angegebene andere ImageData-Objekt (kopiert keine Bilddaten):

var imgData=context.createImageData(imageData);

Parameterwert

Parameter Beschreibung
width Die Breite des ImageData-Objekts in Pixeln.
height Die Höhe des ImageData-Objekts in Pixeln.
imageData Ein weiterer ImageData-Objekt.

Browserkompatibilität

Die in der Tabelle angegebenen Zahlen beziehen sich auf die erste Version des Browsers, die diese Eigenschaft vollständig unterstützt.

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

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Canvas-Referenzhandbuch