Método putImageData() da tela HTML

Exemplo

O código abaixo copia os dados de pixel para um retângulo especificado na tela com getImageData() e, em seguida, coloca os dados da imagem de volta na tela com 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);
}

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.

Method
putImageData()	Yes	9.0	Yes	Yes	Yes

Definição e uso

O método putImageData() coloca os dados da imagem (de um objeto ImageData especificado) de volta na tela.

Dica: Leia sobre o método getImageData() que copia os dados de pixel para um retângulo especificado em uma tela.

Dica: Leia sobre o método createImageData() que cria um novo objeto ImageData em branco.

Sintaxe JavaScript

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

Valores de parâmetro

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

❮ Referência de tela HTML