Metodo HTML canvas putImageData()

❮ Riferimento tela HTML

Esempio

Il codice seguente copia i dati dei pixel per un rettangolo specificato sull'area di disegno con getImageData(), quindi rimette i dati dell'immagine sull'area di disegno 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);
}

Supporto del browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.

Method
putImageData() Yes 9.0 Yes Yes Yes

Definizione e utilizzo

Il metodo putImageData() rimette i dati dell'immagine (da un oggetto ImageData specificato) sull'area di disegno.

Suggerimento: leggi il metodo getImageData() che copia i dati dei pixel per un rettangolo specificato su un'area di disegno.

Suggerimento: leggi il metodo createImageData() che crea un nuovo oggetto ImageData vuoto.


Sintassi JavaScript

sintassi JavaScript: contesto .putImageData( imgData,x,y, dirtyX,dirtyY,dirtyWidth,dirtyHeight );

Valori dei parametri

Parameter Description
imgData Specifies the ImageData object to put back onto the canvas
x The x-coordinate, in pixels, of the upper-left corner of the ImageData object
y The y-coordinate, in pixels, of the upper-left corner of the ImageData object
dirtyX Optional. The horizontal (x) value, in pixels, where to place the image on the canvas
dirtyY Optional. The vertical (y) value, in pixels, where to place the image on the canvas
dirtyWidth Optional. The width to use to draw the image on the canvas
dirtyHeight Optional. The height to use to draw the image on the canvas

❮ Riferimento tela HTML