English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
getImageData() restituisce un oggetto ImageData che descrive i dati dei pixel nascosti dell'area del canvas, questa area è rappresentata da un rettangolo, con inizio (sx, sy), larghezza sw e altezza sh.
Manuale di riferimento HTML canvas
Il seguente codice utilizza getImageData() per copiare i dati dei pixel di un rettangolo specifico sullo schermo, quindi utilizza putImageData() per inserire i dati dell'immagine indietro sullo schermo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo getImageData() su canvas HTML5 - Tutorial di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il suo browser non supporta il tag canvas HTML5.
</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>Prova a vedere ‹/›IEFirefoxOperaChromeSafari
Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano getImageData() Metodo.
Attenzione: Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.
Il metodo getImageData() restituisce un oggetto ImageData, che copia i dati dei pixel del rettangolo specificato sulla lavagna.
Attenzione:L'oggetto ImageData non è un'immagine, definisce una parte (rettangolo) della lavagna e memorizza le informazioni di ciascun pixel all'interno di essa.
Per ogni pixel dell'oggetto ImageData, esistono quattro tipi di informazioni, ovvero i valori RGBA:
R - rosso (0-255)
G - verde (0-255)
B - blu (0-255)
A - canale alpha (0-255; 0 è trasparente, 255 è completamente visibile)
Le informazioni di colore/alpha esistono in forma di array e sono memorizzate nell'oggetto ImageData data proprietà.
Suggerimento:Dopo aver completato l'operazione delle informazioni di colore/alpha nell'array, è possibile utilizzare putImageData() Il metodo copia i dati dell'immagine sullo schermo.
Esempio:
Il seguente codice può ottenere le informazioni di colore/alpha del primo pixel dell'oggetto ImageData restituito:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo getImageData() su canvas HTML5 - Tutorial di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il suo browser non supporta il tag canvas HTML5.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
var imgData = ctx.getImageData(30, 30, 50, 50);
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
alert(red + " " + green + " " + blue + " " + alpha);
</script>
</body>
</html>Prova a vedere ‹/›Suggerimento:Puoi anche usare il metodo getImageData() per invertire il colore di ogni pixel di un'immagine sul canvas.
Usa questa formula per esplorare tutti i pixel e cambiare i loro valori di colore:
red = 255 - old_red; green = 255 - old_green; blue = 255 - old_blue;
| Sintassi JavaScript: | context.getImageData(x,y,width,height); |
|---|
| Parametro | Descrizione |
|---|---|
| x | Coordinata x dell'angolo superiore sinistro di inizio copia (in pixel). |
| y | Coordinata y dell'angolo superiore sinistro di inizio copia (in pixel). |
| width | Larghezza dell'area rettangolare da copiare. |
| height | Altezza dell'area rettangolare da copiare. |
Usa getImageData() per invertire il colore di ogni pixel dell'immagine sul canvas:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo getImageData() su canvas HTML5 - Tutorial di base (oldtoolbag.com)</title>
</head>
<body>
<img id="scream" src="views.png">
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
Il suo browser non supporta il tag canvas HTML5.
</canvas>
<script>
document.getElementById("scream").onload = function()
{
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// Inverte i colori
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);
};
</script>
</body>
</html>Prova a vedere ‹/›