HTML canvas putImageData() metode

HTML5 Canvas reference manual

definition og brug

putImageData() metode lægger image data (fra en specificeret ImageData-objekt) tilbage på canvas.

advarsel:Se også getImageData() metode, der kan kopiere pixelsdata fra en specificeret rektangel på canvas.

advarsel:Se også createImageData() metode, der kan oprette et nyt tomt ImageData-objekt.

eksempel

Følgende kode kopierer pixelsdata fra en specificeret rektangel på canvas ved hjælp af getImageData() og peger den tilbage til canvas med putImageData():

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

prøv det selv

syntaks

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

parametre værdier

parametre beskrivelse
imgData Definerer det ImageData-objekt, der skal placeres tilbage på canvas.
x x-koordinaten for øverste venstre hjørne af ImageData-objektet, målt i pixels.
y y-koordinaten for øverste venstre hjørne af ImageData-objektet, målt i pixels.
dirtyX Valgfri. Værdi for horisontal position (x), målt i pixels, for billedets placering på canvas.
dirtyY Valgfri. Værdi for horisontal position (y), målt i pixels, for billedets placering på canvas.
dirtyWidth Valgfri. Bredden, der bruges til at tegne et billede på canvas.
dirtyHeight Valgfri. Højden, der bruges til at tegne et billede på canvas.

Browser support

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

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

Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas> elementet.

HTML5 Canvas reference manual