HTML-Canvas createImageData()Methode

HTML canvas 参考手册 HTML canvas Referenzhandbuch

Beispiele

Erstellen Sie ein ImageData-Objekt mit 100*100 Pixeln, in dem jedes Pixel rot ist, und legen Sie es dann auf dem Canvas ab:

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

Selbst ausprobieren »

Browser-Unterstützung

Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die createImageData()-Methode.

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

Definition und Verwendung

Die createImageData()-Methode erstellt ein neues leeres ImageData-Objekt. Der Standardpixelwert des neuen Objekts ist transparentes Schwarz.

Für jedes Pixel im ImageData-Objekt gibt es vier 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 repräsentiert transparentes Schwarz (0,0,0,0).

Die Farb-/Alpha-Informationen liegen als Array vor, und da das Array vier Informationen für jedes Pixel enthält, ist die Größe des Arrays viermal so groß wie die des ImageData-Objekts: width*height*4. (Es gibt eine einfachere Möglichkeit, die Array-Größe zu erhalten, nämlich ImageDataObject.data.length zu verwenden)

Das Array, das Farb-/Alpha-Informationen enthält, ist im ImageData-Objekt in derdata-Eigenschaft gespeichert.

Tipp:Nachdem Sie die Farb-/Alpha-Informationen im Array bearbeitet haben, können Sie dieputImageData()-Methode verwenden, um die Bilddaten zurück auf den Canvas zu kopieren.

Beispiel:

Die Syntax, um das erste Pixel im ImageData-Objekt rot zu machen:

imgData=ctx.createImageData(100,100);

imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Die Syntax, um das zweite Pixel im ImageData-Objekt grün zu machen:

imgData=ctx.createImageData(100,100);

imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

JavaScript-Syntax

Es gibt zwei Versionen der createImageData()-Methode:

1. Erstellen Sie ein neues ImageData-Objekt mit den angegebenen Abmessungen (in Pixeln):

JavaScript-Syntax:	var imgData=context.createImageData(width,height);

2. Ein neues ImageData-Objekt mit denselben Abmessungen wie ein anderes angegebenes ImageData-Objekt erstellen (ohne die Bilddaten zu kopieren):

JavaScript-Syntax:	var imgData=context.createImageData(imageData);

Parameterwerte

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

HTML-Canvas-Referenzhandbuch Weitere Erweiterungen

HTMLTag