HTML canvas putImageData() Metoda

❮ HTML Canvas Reference

Příklad

Níže uvedený kód zkopíruje data pixelů pro zadaný obdélník na plátno pomocí getImageData() a poté vloží data obrázku zpět na plátno pomocí putImageData():

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

function copy() {
  var imgData = ctx.getImageData(10, 10, 50, 50);
  ctx.putImageData(imgData, 10, 70);
}

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která tuto metodu plně podporuje.

Method
putImageData() Yes 9.0 Yes Yes Yes

Definice a použití

Metoda putImageData() vloží obrazová data (ze zadaného objektu ImageData) zpět na plátno.

Tip: Přečtěte si o metodě getImageData() , která kopíruje data obrazových bodů pro určený obdélník na plátno.

Tip: Přečtěte si o metodě createImageData() , která vytvoří nový prázdný objekt ImageData.


Syntaxe JavaScriptu

Syntaxe JavaScriptu: kontext .putImageData( imgData,x,y, dirtyX,dirtyY,dirtyWidth,dirtyHeight );

Hodnoty parametrů

Parameter Description
imgData Specifies the ImageData object to put back onto the canvas
x The x-coordinate, in pixels, of the upper-left corner of the ImageData object
y The y-coordinate, in pixels, of the upper-left corner of the ImageData object
dirtyX Optional. The horizontal (x) value, in pixels, where to place the image on the canvas
dirtyY Optional. The vertical (y) value, in pixels, where to place the image on the canvas
dirtyWidth Optional. The width to use to draw the image on the canvas
dirtyHeight Optional. The height to use to draw the image on the canvas

❮ HTML Canvas Reference