Baseline Widely available
Die CanvasRenderingContext2D.createImageData() Methode der Canvas 2D API erstellt ein neues, leeres ImageData-Objekt mit den angegebenen Abmessungen. Alle Pixel im neuen Objekt sind transparent schwarz.
createImageData(width, height)
createImageData(width, height, settings)
createImageData(imagedata)
width
Die Breite, die dem neuen ImageData-Objekt gegeben werden soll. Ein negativer Wert dreht das Rechteck entlang der vertikalen Achse.
height
Die Höhe, die dem neuen ImageData-Objekt gegeben werden soll. Ein negativer Wert dreht das Rechteck entlang der horizontalen Achse.
settings Optional
Ein Objekt mit folgenden Eigenschaften:
colorSpace: Gibt den Farbraum der Bilddaten an. Kann auf "srgb" für den sRGB Farbraum oder "display-p3" für den display-p3 Farbraum gesetzt werden.imagedata
Ein bestehendes ImageData-Objekt, von dem die Breite und Höhe kopiert werden. Das Bild selbst wird nicht kopiert.
Ein neues ImageData-Objekt mit der angegebenen Breite und Höhe. Das neue Objekt ist mit transparenten schwarzen Pixeln gefüllt.
IndexSizeError DOMException
Wird ausgelöst, wenn eines der Argumente width oder height null ist.
Dieses Snippet erstellt ein leeres ImageData-Objekt mit der createImageData()-Methode.
<canvas id="canvas"></canvas>
Das erzeugte Objekt ist 100 Pixel breit und 50 Pixel hoch, also insgesamt 5.000 Pixel. Jedes Pixel innerhalb eines ImageData-Objekts besteht aus vier Array-Werten, sodass die data-Eigenschaft des Objekts eine Länge von 4 à 5.000 oder 20.000 hat.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 50);
console.log(imageData);
// ImageData { width: 100, height: 50, data: Uint8ClampedArray[20000] }
Dieses Beispiel erstellt und füllt ein neues ImageData-Objekt mit lila Pixeln.
<canvas id="canvas"></canvas>
Da jedes Pixel aus vier Werten besteht, iteriert die for-Schleife in Vielfachen von vier. Die Array-Werte, die jedem Pixel zugeordnet sind, sind R (rot), G (grün), B (blau) und A (alpha) in dieser Reihenfolge.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);
// Iterate through every pixel
for (let i = 0; i < imageData.data.length; i += 4) {
// Modify pixel data
imageData.data[i + 0] = 190; // R value
imageData.data[i + 1] = 0; // G value
imageData.data[i + 2] = 210; // B value
imageData.data[i + 3] = 255; // A value
}
// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);
Für weitere Beispiele zur Verwendung von createImageData() und dem ImageData-Objekt siehe Pixelmanipulation mit canvas und ImageData.data.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4