Metodo putImageData() del canvas

Manuale di riferimento del canvas

Definizione e uso

putImageData() Metodo che ripone i dati dell'immagine (dall'oggetto ImageData specificato) sul canvas.

Suggerimento:Vedere anche getImageData() Metodo che può copiare i dati dei pixel di un rettangolo specifico sul canvas.

Suggerimento:Vedere anche createImageData() Metodo che può creare un nuovo oggetto ImageData vuoto.

Esempio

Il seguente codice copia i dati dei pixel di un rettangolo specifico sul canvas utilizzando getImageData() e riposiziona i dati dell'immagine sul canvas utilizzando 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);
}

Prova personalmente

Sintassi

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

Valore del parametro

Parametro Descrizione
imgData Oggetto ImageData da riporre nel canvas.
x Coordinate x dell'angolo superiore sinistro dell'oggetto ImageData, in pixel.
y Coordinate y dell'angolo superiore sinistro dell'oggetto ImageData, in pixel.
dirtyX Opzionale. Valore orizzontale (x), in pixel, per posizionare l'immagine sul canvas.
dirtyY Opzionale. Valore orizzontale (y), in pixel, per posizionare l'immagine sul canvas.
dirtyWidth Opzionale. Larghezza utilizzata per disegnare l'immagine sul canvas.
dirtyHeight Opzionale. Altezza utilizzata per disegnare l'immagine sul canvas.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo in primo luogo.

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