Canvas putImageData() metod

Canvas-referencehandbok

Definition och användning

putImageData() Metod som lägger tillbaka bilddata (från ett specificerat ImageData-objekt) på canvasen.

Tips:Se också getImageData() Metod som kan kopiera pixeldata från en specificerad rektangel på canvasen.

Tips:Se också createImageData() Metod som kan skapa ett nytt tomt ImageData-objekt.

Exempel

Följande kod kopierar pixeldata från en specificerad rektangel på canvasen med hjälp av getImageData() och placerar tillbaka bilddata på canvasen med 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);
}

Prova själv

Syntaks

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

Parametervärde

Parameter Beskrivning
imgData Bestämmer det ImageData-objekt som ska placeras tillbaka på canvasen.
x x-koordinaten för den vänstra övre hörnpositionen på ImageData-objektet, i pixlar.
y y-koordinaten för den vänstra övre hörnpositionen på ImageData-objektet, i pixlar.
dirtyX Valgfritt. Horisontell värde (x), i pixlar, för placeringen av bilden på canvasen.
dirtyY Valgfritt. Horisontell värde (y), i pixlar, för placeringen av bilden på canvasen.
dirtyWidth Valgfritt. Bredden som används för att rita bilder på canvasen.
dirtyHeight Valgfritt. Höjden som används för att rita bilder på canvasen.

Browserr support

Numreringen i tabellen visar den första webbläsarversionen som helt stöder denna egenskap.

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

Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.

Canvas-referencehandbok