Método putImageData() do Canvas

Manual de referência do Canvas

Definição e uso

putImageData() Método que coloca os dados de imagem (do objeto ImageData especificado) na tela.

Dica:Veja também getImageData() Método que pode copiar os dados de pixels de um retângulo específico na tela.

Dica:Veja também createImageData() Método que pode criar um novo objeto ImageData em branco.

Exemplo

O código a seguir copia os dados de pixels de um retângulo específico na tela usando getImageData() e coloca os dados de imagem de volta na tela usando 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);
}

Experimente você mesmo

Sintaxe

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

Valor do parâmetro

Parâmetro Descrição
imgData O objeto ImageData que será colocado na tela.
x Coordenada x superior esquerda do objeto ImageData, em pixels.
y Coordenada y superior esquerda do objeto ImageData, em pixels.
dirtyX Opcional. O valor horizontal (x), em pixels, para posicionar a imagem na tela.
dirtyY Opcional. O valor horizontal (y), em pixels, para posicionar a imagem na tela.
dirtyWidth Opcional. A largura usada para desenhar a imagem na tela.
dirtyHeight Opcional. A altura usada para desenhar a imagem na tela.

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou plenamente essa propriedade pela primeira vez.

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

Observação:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Manual de referência do Canvas