Exemplo
O código a seguir copia os dados de pixel para um retângulo especificado na tela com getImageData() , e depois colocar os dados de imagem de volta para a 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);
} Tente você mesmo " Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| putImageData() | sim | 9 | sim | sim | sim |
Definição e Uso
O putImageData() método coloca os dados da imagem (a partir de um objeto ImageData especificado) de volta para a tela.
Dica: Leia sobre o getImageData() método que copia os dados de pixel para um retângulo especificado em uma lona.
Dica: Leia sobre o createImageData() método que cria um novo, objeto ImageData em branco.
JavaScript Sintaxe
| sintaxe JavaScript: | context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight ); |
|---|
Os valores dos parâmetros
| Parâmetro | Descrição |
|---|---|
| imgData | Especifica o objeto ImageData para colocar de volta para a tela |
| x | O x-coordenar, em pixels, do canto superior esquerdo do objeto ImageData |
| y | A coordenada y, em pixels, do canto superior esquerdo do objeto ImageData |
| dirtyX | Opcional. O valor horizontal (X), em pixels, onde colocar a imagem sobre a tela |
| dirtyY | Opcional. O valor vertical (Y), em pixels, onde colocar a imagem sobre a tela |
| dirtyWidth | Opcional. A largura de usar para desenhar a imagem sobre a tela |
| dirtyHeight | Opcional. A altura de usar para desenhar a imagem sobre a tela |