HTML-Canvas putImageData()Methode
Beispiele
Der folgende Code kopiert die Pixeldaten eines angegebenen Rechtecks auf dem Canvas über getImageData() und legt die Bilddaten anschließend über putImageData() wieder auf dem Canvas ab:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
Selbst ausprobieren »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die Methode putImageData().
Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
Definition und Verwendung
Die Methode putImageData() legt Bilddaten (aus dem angegebenen ImageData-Objekt) zurück auf den Canvas.
Tipp:Bitte beachten Sie diegetImageData()-Methode, die die Pixeldaten eines angegebenen Rechtecks auf dem Canvas kopieren kann.
Tipp:Bitte beachten Sie diecreateImageData()-Methode, die ein neues leeres ImageData-Objekt erstellen kann.
JavaScript-Syntax
| JavaScript-Syntax: | context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight); |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| imgData | Gibt das ImageData-Objekt an, das zurück auf den Canvas gelegt werden soll. |
| x | Die x-Koordinate der oberen linken Ecke des ImageData-Objekts in Pixeln. |
| y | Die y-Koordinate der oberen linken Ecke des ImageData-Objekts in Pixeln. |
| dirtyX | Optional. Der horizontale Wert (x) in Pixeln für die Position, an der das Bild auf dem Canvas platziert wird. |
| dirtyY | Optional. Der vertikale Wert (y) in Pixeln für die Position, an der das Bild auf dem Canvas platziert wird. |
| dirtyWidth | Optional. Die Breite, mit der das Bild auf dem Canvas gezeichnet wird. |
| dirtyHeight | Optional. Die Höhe, mit der das Bild auf dem Canvas gezeichnet wird. |
HTML-Canvas-Referenzhandbuch Weitere Erweiterungen