Exemplo
O código abaixo cópias dos dados de pixel para um rectângulo especificado na tela com getImageData() , e depois colocar os dados de imagem para trás sobre 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 navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| putImageData() | 4.0 | 9 | 3,6 | 4.0 | 10.1 |
Definição e Uso
O putImageData() método coloca os dados de imagem (from a specified ImageData object) de volta para a tela.
Tip: Leia sobre o getImageData() método que copia os dados de pixels para um retângulo especificado em uma tela.
Tip: 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 | A coordenada x, em pixels, do canto superior esquerdo do objecto ImageData |
| y | A coordenada y, em pixels, do canto superior esquerdo do objecto ImageData |
| dirtyX | Opcional. A horizontal (x) valor, em pixels, onde colocar a imagem na tela |
| dirtyY | Opcional. A vertical (y) de valor, em pixels, onde colocar a imagem sobre a tela |
| dirtyWidth | Opcional. A largura de usar para desenhar a imagem na tela |
| dirtyHeight | Opcional. A altura de usar para desenhar a imagem na tela |
<Object Canvas