Esempio
Il seguente codice copia i dati dei pixel per un rettangolo specificato sulla tela con getImageData() , e poi mettere i dati dell'immagine di nuovo sulla tela con 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);
} Prova tu stesso " Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| metodo | |||||
|---|---|---|---|---|---|
| putImageData() | sì | 9.0 | sì | sì | sì |
Definizione e utilizzo
Il putImageData() metodo mette i dati di immagine (da un oggetto ImageData specificato) di nuovo sulla tela.
Suggerimento: Leggi il getImageData() metodo che copia i dati dei pixel per un rettangolo specificato su una tela.
Suggerimento: Leggi il createImageData() metodo che crea un nuovo oggetto ImageData vuoto.
JavaScript Syntax
| sintassi JavaScript: | context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight ); |
|---|
valori dei parametri
| Parametro | Descrizione |
|---|---|
| imgData | Specifica l'oggetto ImageData di rimettere sulla tela |
| x | La coordinata x, in pixel, l'angolo superiore sinistro dell'oggetto ImageData |
| y | La coordinata y, in pixel, l'angolo superiore sinistro dell'oggetto ImageData |
| dirtyX | Facoltativo. Il valore orizzontale (x), in pixel, dove collocare l'immagine sulla tela |
| dirtyY | Facoltativo. Il valore verticale (y), espressa in pixel, dove collocare l'immagine sulla tela |
| dirtyWidth | Facoltativo. La larghezza da utilizzare per disegnare l'immagine sulla tela |
| dirtyHeight | Facoltativo. L'altezza da utilizzare per disegnare l'immagine sulla tela |