metodo putImageData() del canvas HTML

Manuale di riferimento del canvas HTML5

definizione e uso

putImageData() metodo inserisce i dati dell'immagine (dall'oggetto ImageData specificato) sulla gomma.

suggerimento:Vedere getImageData() metodo che può copiare i dati dei pixel di un rettangolo specifico sulla gomma.

suggerimento:Vedere createImageData() metodo che può creare un nuovo oggetto ImageData vuoto.

esempio

Il seguente codice copia i dati dei pixel di un rettangolo specifico sulla gomma e poi ripristina i dati dell'immagine sulla gomma utilizzando putImageData():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copia()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

prova personalmente

sintassi

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

valore del parametro

parametro descrizione
imgData Oggetto ImageData da inserire nel canvas.
x Coordinata x dell'angolo superiore sinistro dell'oggetto ImageData, espressa in pixel.
y Coordinata y dell'angolo superiore sinistro dell'oggetto ImageData, espressa in pixel.
dirtyX Opzionale. Valore orizzontale (x), espresso in pixel, della posizione dell'immagine sul canvas.
dirtyY Opzionale. Valore orizzontale (y), espresso in pixel, della posizione dell'immagine sul canvas.
dirtyWidth Opzionale. La larghezza utilizzata per disegnare l'immagine sul canvas.
dirtyHeight Opzionale. L'altezza utilizzata per disegnare l'immagine sul canvas.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta per la prima volta questa proprietà.

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

Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.

Manuale di riferimento del canvas HTML5