Canvas putImageData() metoden

Canvas referencer

Definisjon og bruk

putImageData() Metode der lægger billededata tilbage på canvas fra det specificerede ImageData-objekt.

Tip:Se også getImageData() Metode, der kan kopiere pixeldata fra en specificeret rektangel på canvas.

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

Eksempel

Følgende kode kopierer pixeldata fra en specificeret rektangel på canvas ved hjælp af getImageData() og lægger derefter billededata tilbage på canvas ved hjælp af 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);
}

Prøv det selv

Syntaks

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

Parameterværdi

Parameter 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. Horisontal værdi (x), målt i pixels, for placeringen af billedet på canvas.
dirtyY Valgfri. Horisontal værdi (y), målt i pixels, for placeringen af billedet 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.

Canvas referencer