HTML Canvas putImageData() Methode

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

putImageData() Methode setzt die Bilddaten (aus einem bestimmten ImageData-Objekt) auf das Canvas zurück.

Hinweis:Siehe auch getImageData() Methode, die die Pixeldaten eines bestimmten Rechtecks auf dem Canvas kopiert.

Hinweis:Siehe auch createImageData() Methode, die ein neues leeres ImageData-Objekt erstellt.

Beispiel

Das folgende Code zeichnet die Pixeldaten eines bestimmten Rechtecks auf dem Canvas und speichert sie mit getImageData() ab, und fügt sie dann mit putImageData() zurück in das Canvas ein:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

Probieren Sie es selbst aus

Syntax

Kontext.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

Parameterwert

Parameter Beschreibung
imgData Das ImageData-Objekt, das in den Canvas zurückgegeben werden soll.
x Die x-Koordinate der linken oberen Ecke des ImageData-Objekts, in Pixel.
y Die y-Koordinate der linken oberen Ecke des ImageData-Objekts, in Pixel.
dirtyX Optional. Der horizontale Wert (x), in Pixel, für die Position des Bildes auf dem Canvas.
dirtyY Optional. Der horizontale Wert (y), in Pixel, für die Position des Bildes auf dem Canvas.
dirtyWidth Optional. Die Breite, die verwendet wird, um ein Bild auf dem Canvas zu zeichnen.
dirtyHeight Optional. Die Höhe, die verwendet wird, um ein Bild auf dem Canvas zu zeichnen.

Browserkompatibilität

Die Zahlen in der Tabelle zeigen die erste Browser-Version, die das Attribut 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