HTML canvas putImageData() methode

HTML5 Canvas referentiehandleiding

definitie en gebruik

putImageData() methode zet de gegevensinformatie (van het gedefinieerde ImageData-object) terug op het canvas.

tip:zie ook getImageData() methode die de pixelgegevens van een gedefinieerde rechthoek op het canvas kan kopiëren.

tip:zie ook createImageData() methode die een nieuwe lege ImageData-object kan maken.

voorbeeld

De volgende code kopieert de pixelgegevens van een gedefinieerde rechthoek op het canvas via getImageData() en zet deze terug op het canvas met 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

syntaxis

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

parameterwaarde

parameter beschrijving
imgData Bepaal het ImageData-object dat teruggestuurd moet worden naar het canvas.
x X-coördinaat van de linkerkant van het ImageData-object, uitgedrukt in pixels.
y Y-coördinaat van de linkerkant van het ImageData-object, uitgedrukt in pixels.
dirtyX Optioneel. Horizontale waarde (x), uitgedrukt in pixels, van de positie waarop de afbeelding op het canvas wordt geplaatst.
dirtyY Optioneel. Horizontale waarde (y), uitgedrukt 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.

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die deze eigenschap volledig ondersteunt.

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

Opmerking:Internet Explorer 8 en oudere versies ondersteunen niet het <canvas> element.

HTML5 Canvas referentiehandleiding