Manuale di riferimento HTML

Completo elenco dei tag HTML

Metodo putImageData() di canvas HTML

putImageData() è il metodo di Canvas 2D API per disegnare i dati da un oggetto ImageData esistente su un'immagine bitmap. Se viene fornito un rettangolo disegnato, vengono disegnati solo i pixel di quel rettangolo. Questo metodo non è influenzato dalla matrice di trasformazione del canvas.

Manuale di riferimento di HTML canvas

Esempio online

Il seguente codice utilizza getImageData() per copiare i dati dei pixel di un rettangolo specificato sul canvas, quindi utilizza putImageData() per inserire i dati dell'immagine nuovamente sul canvas:

Esempio

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo getImageData() su HTML canvas - Guida di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>
<script>
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);
}
</script>
<button onclick="copy()">Copia</button>
</body>
</html>

Testa per vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano il metodo putImageData().

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

Definizione e uso

Il metodo putImageData() inserisce i dati dell'immagine (provenienti dall'oggetto ImageData specificato) nuovamente sul canvas.

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

Suggerimento:Vedere createImageData() Metodo che crea un nuovo oggetto ImageData vuoto.

Sintassi JavaScript

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

Valore del parametro

Parametro	Descrizione
imgData	Oggetto ImageData da riporre sulla lavagna.
x	Coordenata x dell'angolo superiore sinistro dell'oggetto ImageData, in pixel.
y	Coordenata y dell'angolo superiore sinistro dell'oggetto ImageData, in pixel.
dirtyX	Opzionale. Valore orizzontale (x), in pixel, per posizionare l'immagine sulla lavagna.
dirtyY	Opzionale. Valore verticale (y), in pixel, per posizionare l'immagine sulla lavagna.
dirtyWidth	Opzionale. La larghezza utilizzata per disegnare l'immagine sulla lavagna.
dirtyHeight	Opzionale. L'altezza utilizzata per disegnare l'immagine sulla lavagna.

　Manuale di riferimento di HTML canvas

HTML: <template> etichetta