1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: CanvasRenderingContext2D.getImageData()
slug: Web/API/CanvasRenderingContext2D/getImageData
translation_of: Web/API/CanvasRenderingContext2D/getImageData
---
<div>{{APIRef}}</div>
<p>Die <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData()</code></strong> Methode der Canvas 2D API gibt ein Objekt des Types {{domxref("ImageData")}} zurück. Dieses Objekt repräsentiert die jeweiligen Pixel-Daten im Bereich des Rechtecks mit den Startkoordinaten <em>(</em><em>sx</em><em>,</em><em>sy</em><em>) </em> und den Dimensionen <em>sw </em> in der Breite und<em> sy </em> in der Höhe. </p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt><code>sx</code></dt>
<dd>Die x Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.</dd>
<dt><code>sy</code></dt>
<dd>Die y Koordinate der oberen linken Ecke des Rechtecks, aus welchem die Pixel-Daten gelesen werden.</dd>
<dt><code>sw</code></dt>
<dd>Die Breite des Rechtecks aus dem die Pixel-Daten gelesen werden.</dd>
<dt><code>sh</code></dt>
<dd>Die Höhe des Rechtecks aus dem die Pixel-Daten gelesen werden. </dd>
</dl>
<h3 id="Rückgabewerte">Rückgabewerte</h3>
<p>Ein Objekt vom Typ {{domxref("ImageData")}} das die Pixeldaten im angegeben bereich des Canvas-Elements beinhaltet.</p>
<h3 id="Fehlertypen">Fehlertypen</h3>
<dl>
<dt><code>IndexSizeError</code></dt>
<dd>Tritt ein, wenn entweder das Höhen oder das Breiten Argument null ist.</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Benutzung_der_getImageData_Funktion">Benutzung der <code>getImageData</code> Funktion</h3>
<p>Das ist ein einfaches Code-Beispiel zur Benutzung der <code>getImageData</code> Funktion. Für mehr Informationen siehe <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a> und die Referenz zum {{domxref("ImageData")}} Objekt.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.fill();
console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<p>{{ CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}} [1]</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}} [1]</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Ab {{GeckoRelease("5.0")}} unterstützt <code>getImageData()</code> die Angabe von Rechtecken, die die Ränder des <em>Canvas-</em>Elements überschreiten. Die Pixel, die außerhalb des Elementes liegen, werden als transparentes Schwarz zurückgegeben. Auch wenn die größe des Rechtecks kleiner als eins ist wird jetzt mindestens ein Pixel als Pixel-Daten zurückgegeben.</p>
<h2 id="Sehen_Sie_auch">Sehen Sie auch</h2>
<ul>
<li>Das Interface zur Definition, {{domxref("CanvasRenderingContext2D")}}.</li>
<li>{{domxref("ImageData")}}</li>
<li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation with canvas</a></li>
</ul>
|
