HTML Referenzhandbuch

HTML 标签大全

HTML canvas getImageData() Methode

getImageData() gibt ein ImageData-Objekt zurück, das die versteckten Pixeldaten eines canvas-Bereichs beschreibt, der durch ein Rechteck dargestellt wird, das von (sx, sy) ausgeht, eine Breite von sw und eine Höhe von sh hat.

HTML Canvas Referenzhandbuch

Zu verwendendes Bild:

Der folgende Code verwendet getImageData(), um die Pixeldaten eines bestimmten Rechtecks der Leinwand zu kopieren, und verwendet dann putImageData(), um die Bilddaten zurück auf die Leinwand zu setzen:

canvas-Tag.

Beispiel
!DOCTYPE　html>
<html>
<head>-8<meta　charset="utf
">-<title>HTML　canvas　getImageData()‑Methode verwenden3codebox.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="3"　height="150" style="border:1px　fest　#d3d3d3">
Ihr Browser unterstützt keine　HTML5　canvas　Tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
2d");
var　ctx=c.getContext("
ctx.fillStyle="red";10ctx.fillRect(10ctx.fillRect(550,
function copy()
{
　　　　,10ctx.fillRect(10ctx.fillRect(550,
　　　　ctx.putImageData(imgData,10ctx.fillRect(70,
}
</script>
<button onclick="copy()">Kopieren</button>
</body>
</html>

Testen Sie heraus ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome und Safari unterstützen getImageData() Methode.

Hinweis: Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Definition und Verwendung

Die Methode getImageData() gibt ein ImageData-Objekt zurück, das die Pixeldaten des angegebenen Rechtecks der Leinwand kopiert.

Hinweis:Das ImageData-Objekt ist kein Bild, es definiert einen Teil der Leinwand (Rechteck) und speichert die Informationen jedes Pixels in diesem Rechteck.

Für jedes Pixel im ImageData-Objekt gibt es vier Arten von Informationen, nämlich die RGBA-Werte:

R - Rot (0-255)
G - Grün (0-255)
B - Blau (0-255)
A - Alpha-Kanal (0-255; 0 ist transparent255 sind vollständig sichtbar)

color/Die Alpha-Informationen sind als Array vorhanden und gespeichert im data Eigenschaft arbeiten.

alpha);mit den im Array befindlichen Farben/Nach der Alpha-Information können Sie putImageData() Die Methode kopiert die Bilddaten zurück auf die Leinwand.

Beispiel:

Nachstehender Code ermöglicht den Zugriff auf die Farbe des ersten Pixels im zurückgegebenen ImageData-Objekt/Alpha-Information:

canvas-Tag.

Beispiel
!DOCTYPE　html>
<html>
<head>-8<meta　charset="utf
">-<title>HTML　canvas　getImageData()‑Methode verwenden3codebox.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="3"　height="150" style="border:1px　fest　#d3d3d3">
Ihr Browser unterstützt keine　HTML5　canvas　Tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
2d");
var　ctx=c.getContext("
ctx.fillStyle="red";10ctx.fillRect(10ctx.fillRect(550,
,33550,
0);
red=imgData.data[0];1];
green=imgData.data[2];
blue=imgData.data[3];
alpha=imgData.data[　+　blue　+　alert(red　+　blue　+　green　+　blue　+　"　"
</script>
</body>
</html>

Testen Sie heraus ‹/›

alpha);Hinweis:

Sie können auch die getImageData()‑Methode verwenden, um die Farben jedes Pixels eines bestimmten Bildes auf dem Canvas umzukehren.

　　　　　　　　Verwenden Sie das folgende Formula, um alle Pixel durchzugehen und deren Farben zu ändern:255-red=
old_red;255-green=
old_green;255-blue=

old_blue;

JavaScript-Syntax	JavaScript-Syntax:context.getImageData(x,y,width,height

);

Parameterwert	Parameter
Beschreibung	x
x-Koordinate der linken oberen Ecke des zu kopierenden Rechtecks (in Pixeln).	y
y-Koordinate der linken oberen Ecke des zu kopierenden Rechtecks (in Pixeln).	width
Breite des zu kopierenden Rechtecks.	height

Höhe des zu kopierenden Rechtecks.

Zu verwendendes Bild:

Online-Beispiel

canvas-Tag.

Beispiel
!DOCTYPE　html>
<html>
<head>-8<meta　charset="utf
">-<title>HTML　canvas　getImageData()‑Methode verwenden3codebox.com)</title>
</head>
<body>
<img　id="scream"　src="views.png">
<canvas　id="myCanvas"　width="3"　height="2"　style="border:1px　fest　#d3d3d3">
Ihr Browser unterstützt keine　HTML5　canvas　Tag.
</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);
　　　　//　Farbe umkehren
　　　　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>

Testen Sie heraus ‹/›

HTML Canvas Referenzhandbuch

HTML: <template> Tag