HTML-Canvas createImageData()- Methode
Beispiel
Erstellen Sie ein 100 * 100 Pixel großes ImageData-Objekt, bei dem jedes Pixel rot ist, und platzieren Sie es auf der Leinwand:
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);
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| createImageData() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die Methode createImageData() erstellt ein neues, leeres ImageData-Objekt. Die Pixelwerte des neuen Objekts sind standardmäßig transparent schwarz.
Für jedes Pixel in einem ImageData-Objekt gibt es vier Informationen, die RGBA-Werte:
R - Die Farbe Rot (von 0-255)
G - Die Farbe Grün (von 0-255)
B - Die Farbe Blau (von 0-255)
A - Der Alpha-Kanal (von 0-255; 0 ist transparent und 255 ist vollständig sichtbar)
Transparentes Schwarz bedeutet also: (0, 0, 0, 0).
Die Farb-/Alpha-Informationen werden in einem Array gespeichert, und da das Array 4 Informationen für jedes Pixel enthält, ist die Größe des Arrays viermal so groß wie das ImageData-Objekt: Breite*Höhe*4. (Eine einfachere Möglichkeit, die Größe des Arrays zu ermitteln, ist die Verwendung von ImageDataObject.data.length)
Das Array mit den Farb-/Alpha-Informationen wird in der data- Eigenschaft des ImageData-Objekts gespeichert.
Tipp: Nachdem Sie die Farb-/Alpha-Informationen im Array manipuliert haben, können Sie die Bilddaten mit der Methode putImageData() wieder auf die Leinwand kopieren .
Beispiele:
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 Methode createImageData():
1. Dadurch wird ein neues ImageData-Objekt mit den angegebenen Abmessungen (in Pixeln) erstellt:
| JavaScript-Syntax: | var imgData = Kontext .createImageData ( Breite, Höhe ); |
|---|
2. Dadurch wird ein neues ImageData-Objekt mit denselben Abmessungen wie das durch anotherImageData angegebene Objekt erstellt (dabei werden die Bilddaten nicht kopiert):
| JavaScript syntax: | var imgData = context.createImageData(imageData); |
|---|
Parameterwerte
| Parameter | Description |
|---|---|
| width | The width of the new ImageData object, in pixels |
| height | The height of the new ImageData object, in pixels |
| imageData | anotherImageData object |
❮ Canvas-Objekt