HTML Canvas createImageData() Methode

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

createImageData() Methode zum Erstellen eines neuen leeren ImageData-Objekts. Der Standardwert der Pixelwerte des neuen Objekts ist transparenter Schwarz.

Für jedes Pixel eines ImageData-Objekts 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 ist in Form eines Arrays vorhanden und da das Array vier Informationen pro Pixel enthält, ist die Größe des Arrays viermal so groß wie die des ImageData-Objekts. (Es gibt eine einfachere Methode, 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 data in den Attributen verwenden.

Hinweis:Nachdem Sie die color/alpha-Informationen im Array bearbeitet haben, 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 100*100 Pixel großes ImageData-Objekt, 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 angegebenen Größe (in Pixeln) (ohne Bilddaten zu kopieren):

var imgData=context.createImageData(imageData);

Parameterwert

Parameter Beschreibung
width Breite des ImageData-Objekts in Pixel.
height Höhe des ImageData-Objekts in Pixel.
imageData Ein weiteres ImageData-Objekt.

Browser-Unterstützung

Die in der Tabelle angegebenen Zahlen beziehen sich auf die erste Browser-Version, 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.

HTML5 Canvas Referenzhandbuch