Canvas putImageData() Method

Canvas reference manual

Definitie en gebruik

putImageData() Method die afbeeldingsgegevens (van een specifieke ImageData-object) terug kan plaatsen op het canvas.

Tip:Zie ook getImageData() Method die de pixelgegevens van een specifieke rechthoek op het canvas kan kopiëren.

Tip:Zie ook createImageData() Method die een nieuw leeg ImageData-object kan maken.

Voorbeeld

De volgende code kopieert de pixelgegevens van een specifieke rechthoek op het canvas via getImageData() en plaatst de afbeeldingsgegevens terug op het canvas via putImageData():

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

Probeer het zelf

Syntax

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

Parameterwaarde

Parameter Beschrijving
imgData Het ImageData-object dat moet worden geplaatst op het canvas.
x X-coördinaat van de linkerbovenhoek van het ImageData-object, in pixels.
y Y-coördinaat van de linkerbovenhoek van het ImageData-object, in pixels.
dirtyX Optioneel. Horizontale waarde (x), in pixels, van de positie waarop de afbeelding op het canvas wordt geplaatst.
dirtyY Optioneel. Horizontale waarde (y), in pixels, van de positie waarop de afbeelding op het canvas wordt geplaatst.
dirtyWidth Optioneel. De breedte die wordt gebruikt om een afbeelding te tekenen op het canvas.
dirtyHeight Optioneel. De hoogte die wordt gebruikt om een afbeelding te tekenen op het canvas.

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Canvas reference manual