-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
347 lines (329 loc) · 22.4 KB
/
index.html
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html lang="en">
<head>
<title>Histogramme & Punktoperatoren</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="author" content="Johannes Pietrzyk, Benjamin Worpitz">
<link type="text/css" rel="stylesheet" href="css/histo.css" />
<link type="text/css" rel="stylesheet" href="css/tabs.css" />
<link type="text/css" rel="stylesheet" href="css/pointop.css" />
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/thumbImage.js"></script>
<script type="text/javascript" src="js/extendedImageData.js"></script>
<script type="text/javascript" src="js/histogramRenderer.js"></script>
<script type="text/javascript" src="js/pointOperator.js"></script>
<script type="text/javascript" src="js/tab1Histo.js"></script>
<script type="text/javascript" src="js/tab2CumHisto.js"></script>
<script type="text/javascript" src="js/tab3PointOp.js"></script>
<script type="text/javascript" src="js/tab4SamplePointOps.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Histogramme & Punktoperatoren </h1>
<div id="tabContainer">
<div id="tabs">
<ul>
<li id="tabHeader_1">Histogramme</li>
<li id="tabHeader_2">Kumulative Histogramme</li>
<li id="tabHeader_3">Punktoperatoren</li>
<li id="tabHeader_4">Beispieloperatoren</li>
</ul>
</div>
<div id="tabscontent">
<div class="tabpage" id="tabpage_1">
<h3>Allgemein</h3>
<p>Ein Histogramm im Bereich der Bildverarbeitung zeigt die statistische Häufigkeit der Tonwerte eines Bildes in Form eines (diskreten) Balkendiagramms an. Es wird deshalb auch Tonwertkurve genannt.
Auf der horizontalen Achse befinden sich die Tonwerte (Farb-/Helligkeitswerte). Die Höhe eines Balkens gibt an, wie häufig dieser Tonwert im Bild vorkommt.
Im einfachsten Falle eines Graustufenbildes spiegelt es die Anzahl von Pixeln der Farben Schwarz (am linken Rand) bis Weiß (am rechten Rand) wieder.</p>
<p>Die Anzahl der Pixel mit dem Tonwert <i>g</i> wird durch die Funktion <i>h(g)</i> beschrieben.
Die Tonwerte liegen dabei meist im Intervall <i>[0, 255]</i> vor, da mit 8 Bit pro Kanal genau <i>2^8=256</i> verschiedene Werte abgebildet werden können.</p>
<p>Anhand eines Histogramms kann man die Tonwertverteilung und somit die korrekte Belichtung (Unter-/Überbelichtung), den Kontrast und andere visuelle Attribute des Ausgangsbildes abschätzen.
Es gibt keine Möglichkeit das Originalbild aus einem Histogramm zu rekonstruieren, da jede unterschiedliche Anordnung von Pixelwerten genau das selbe Histogram aufweist.</p>
<br/>
<h3>Farbbilder</h3>
<p>Auch für Farbbilder lassen sich Histogramme erstellen. Eine Möglichkeit besteht darin, für jeden Kanal ein einzelnes Histogramm zu erstellen. Diese können optional auch in ein Histogramm überblendet werden.
Auch für RGB Farbbilder lässt sich eine Pixelhelligkeit berechnen. Durch die Farbraumtransformation von RGB nach YCbCr erhält man die Pixelhelligkeit Y, welche im CIE-Normvalenzsystem vorliegt.
Die Berechnungsvorschrift lautet dann: <i>Y = 0.299 * R + 0.587 * G + 0.114 * B</i>.</p>
<br/>
<h3>Histogrammerstellung</h3>
<p>Zur Histogrammerstellung müssen die Tonwerte zuerst in Klassen unterteilt werden.
Standardmäßig besitzt jeder Tonwert seine eigene Klasse.
Nun muss über alle Pixel im Bild iteriert und deren Klasse bestimmt werden, um die absoluten Klassenhäufigkeiten aufzusummieren.
Abschießend wird für jede Klasse ein Balken in der Höhe der Häufigkeit gezeichnet.</p>
<br/>
<h3>Beispiele</h3>
<p>Hier können für eigene Bilder als auch verschiedene Testbilder Histogramme für die Helligkeit, kombinierte und einzelne RGB-Kanäle generiert werden:</p>
<br/>
<p>
<label>Bild:
<select id="tab1SrcImgSelect">
<option value="img/tuolumne-meadows-yosemite-streams_w725_h544.jpg" selected>Yosemite</option>
<option value="img/thermal-hot-spring_w725_h544.jpg">Thermalquelle</option>
<option value="img/rays-on-the-meadow_w725_h544.jpg">Aue</option>
<option value="img/autumn-big-maple-leaves_w725_h544.jpg">Blätter</option>
<option value="img/aircraft-ready-to-take-off-vintage-image_w725_h475.jpg">Flugzeug</option>
<option value="img/Blackbird-sunset-03.jpg">Sonnenuntergang</option>
<option value="img/orion-nebula-space-galaxy_w725_h490.jpg">Orion</option>
<option value="img/northern-lights-scenic-aurora-borealis_w725_h483.jpg">Nordlichter (unterbelichtet - mit Absicht)</option>
<option value="img/snow-wallpapers_w725_h544.png">Schneelandschaft (geringe Dynamik)</option>
<option value="img/800px-C-130J_formation_low-level.jpg">C-130J (geringer Kontrast)</option>
<option value="img/Farbverlauf.jpg">Farbverlauf (Gleichverteilung)</option>
<option value="img/noise2d.jpg">Rauschen (Graustufen, Normalverteilung)</option>
<option value="img/noise5nn.jpeg">Rauschen (Farbe, Normalverteilung)</option>
<option value="user_upload" id="tab1SrcImgSelectOptionUserUpload">Datei öffnen...</option>
</select>
<label id="tab1SrcImgLabel" style="visibility:hidden">Drag and Drop oder Datei-Auswahl-Dialog:
<input type="file" id="tab1SrcImgInput" style="visibility:hidden">
<label/>
</label>
</p>
<p>
<label>Histogramm-Typ:
<select id="tab1HistTypeSelect">
<option value="brightness">Helligkeit</option>
<option value="rgb">RGB</option>
<option value="red">Rot</option>
<option value="green">Grün</option>
<option value="blue">Blau</option>
</select>
</label>
</p>
<div>
<div class="figure">
<img class="thumb image" id="tab1SrcImg" src="img/tuolumne-meadows-yosemite-streams_w725_h544.jpg" alt="Yosemite" />
<div class="caption">Ausgangsbild</div>
</div>
<div class="figure">
<canvas class="thumb image" id="tab1SrcImgHistCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Histogramm</div>
</div>
</div>
<!--
<p><label>Plot fill <input id="plotFill" type="checkbox"></label></p>-->
</div>
<div class="tabpage" id="tabpage_2">
<h3>Allgemein</h3>
<p>Das kumulative Histogramm stellt eine monoton steigende Folge von Werten im Bereich <i>[0,K]</i> dar, wobei <i>K</i> der Anzahl der Pixel im Bild entspricht.</p>
<p>Dieses Histogramm wird berechnet, indem jedem Grauwert g die Summe aller Häufigkeiten H der Grauwerte 0 bis g zugeordnet wird:</p>
<p><img src="img/cumHistoSum.png" alt="kumulatives Histogramm Summe" height="54"></p>
<p>Sind alle Tonwerte gleich Häufig vorhanden, so ergibt sich eine monoton steigende Gerade.</p>
<br/>
<h3>Beispiele</h3>
<p>Hier können für eigene Bilder als auch verschiedene Testbilder Histogramme und die dazugehörigen kumulativen Histogramme für die Helligkeit, kombinierte und einzelne RGB-Kanäle generiert werden:</p>
<br/>
<p>
<label>Bild:
<select id="tab2SrcImgSelect">
<option value="img/tuolumne-meadows-yosemite-streams_w725_h544.jpg">Yosemite</option>
<option value="img/thermal-hot-spring_w725_h544.jpg">Thermalquelle</option>
<option value="img/rays-on-the-meadow_w725_h544.jpg">Aue</option>
<option value="img/autumn-big-maple-leaves_w725_h544.jpg">Blätter</option>
<option value="img/aircraft-ready-to-take-off-vintage-image_w725_h475.jpg">Flugzeug</option>
<option value="img/Blackbird-sunset-03.jpg" selected>Sonnenuntergang</option>
<option value="img/orion-nebula-space-galaxy_w725_h490.jpg">Orion</option>
<option value="img/northern-lights-scenic-aurora-borealis_w725_h483.jpg">Nordlichter (unterbelichtet - mit Absicht)</option>
<option value="img/snow-wallpapers_w725_h544.png">Schneelandschaft (geringe Dynamik)</option>
<option value="img/800px-C-130J_formation_low-level.jpg">C-130J (geringer Kontrast)</option>
<option value="img/Farbverlauf.jpg">Farbverlauf (Gleichverteilung)</option>
<option value="img/noise2d.jpg">Rauschen (Graustufen, Normalverteilung)</option>
<option value="img/noise5nn.jpeg">Rauschen (Farbe, Normalverteilung)</option>
<option value="user_upload" id="tab2SrcImgSelectOptionUserUpload">Datei öffnen...</option>
</select>
<label id="tab2SrcImgLabel" style="visibility:hidden">Drag and Drop oder Datei-Auswahl-Dialog:
<input type="file" id="tab2SrcImgInput" style="visibility:hidden">
<label/>
</label>
</p>
<p>
<label>Histogramm-Typ:
<select id="tab2HistTypeSelect">
<option value="brightness">Helligkeit</option>
<option value="rgb">RGB</option>
<option value="red">Rot</option>
<option value="green">Grün</option>
<option value="blue">Blau</option>
</select>
</label>
</p>
<div>
<div class="figure">
<img class="thumb image" id="tab2SrcImg" src="img/Blackbird-sunset-03.jpg" alt="Sonnenuntergang" />
<div class="caption">Ausgangsbild</div>
</div>
</div>
<div class="clear_both">
<div class="figure">
<canvas class="thumb image" id="tab2SrcImgHistCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Histogramm</div>
</div>
<div class="figure">
<canvas class="thumb image" id="tab2SrcImgCumHistCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Kumulatives Histogramm</div>
</div>
</div>
</div>
<div class="tabpage" id="tabpage_3">
<h3>Allgemein</h3>
<p>Als Punktoperatoren bezeichnet man Bildverarbeitungsoperationen, welche sich dadurch auszeichnen, dass ein neuer Farb- oder Grauwert eines Pixels allein in Abhängigkeit von seinem eigenen bisherigen Farb- oder Grauwert und seiner eigenen bisherigen Position im Bild berechnet wird, ohne dabei von seiner Nachbarschaft abzuhängen.</p>
<p><img src="img/799px-Punkttransformation.png" alt="Punkttransformation" height="140"></p>
<p>Neben den Punktoperatoren, die jedes Pixel eines Bildes einzeln transformieren, gibt es mit den lokalen Operatoren und den globalen Operatoren zwei weitere Klassen von Bildverarbeitungsoperationen. Lokale Operatoren berechnen einen neuen Farb- oder Grauwert eines Pixels immer auf Basis einer Nachbarschaft oder einer örtlich begrenzten Region um das Pixel. Hier seien als Beispiele Rangordnungsoperatoren oder morphologische Operatoren genannt. Globale Operatoren betrachten für die Transformation eines jeden Pixels immer das gesamte Bild, was beispielsweise bei der Fourier-Transformation der Fall ist.</p>
<br/>
<h3>Definition</h3>
<p>Ein Punktoperator <i>T</i> ordnet einem Eingabebild <i>f</i> durch Transformation der Farbwerte der einzelnen Pixel ein Ergebnisbild <i>f*</i> zu. Der Farbwert <i>f(x,y)</i> eines Pixels <i>(x,y)</i> wird dabei nur in Abhängigkeit vom Farbwert selbst und eventuell von der Position des Pixels im Bild modifiziert. Ist die Transformation von der Position des Pixels im Bild abhängig, so heißt sie inhomogen:</p>
<p><img src="img/pointOpF0.png" alt="Definition eines inhomogenen Punktoperators" height="25"></p>
<p>Ist die Transformation unabhängig von der Position des Pixels im Bild, wird sie als homogen bezeichnet:</p>
<p><img src="img/pointOpF1.png" alt="Definition eines homogenen Punktoperators" height="23"></p>
<p>Im Allgemeinen sind Punktoperatoren nicht umkehrbar. In manchen Fällen wie zum Beispiel bei der Invertierung kann dies trotzdem möglich sein.</p>
<br/>
<h3>Anwendung</h3>
<p>Bei Verwendung von diskreten Farbwerten <i>[0,n]</i> kann eine homogene Transformation durch das Nachschlagen in einer Look-up-Tabelle der Größe <i>n</i> implementiert werden. Bei 8 Bit Pro Farbwert sind dies nur <i>2^8 = 256</i> vorzuberechnende Einträge.
Bei kontinuierlichen Farbwerten oder inhomogenen Punktoperatoren ist dies inpraktikabel und die Transformation muss für jedes Pixel neu berechnet werden, da die entstehende Tabelle durch die unendlich vielen möglichen Farbwerte praktisch nicht mehr berechnet werden kann.</p>
<br/>
<h3>Transformationskennlinie</h3>
<p>Homogene Punktoperatoren können durch eine Transformationskennline (Gradationskurve) beschrieben werden.
Sie zeigt, welche Farbwerte des Ausgangsbildes zu welchen Farbwerten im Ergebnisbild transformiert werden.
Wertebereich als auch Definitionsbereich sind somit die Farbwerte des Bildes.
Zum besseren Verständnis des Abbildungsverhaltens eines Punktoperators können Histogram und Transformationskennlinie überlagert werden. Dies ist im folgenden anhand einer Logarithmustransformation illustriert.</p>
<br/>
<p>
<label>Histogramm-Typ:
<select id="tab3HistTypeSelect">
<option value="brightness">Helligkeit</option>
<option value="rgb">RGB</option>
<option value="red">Rot</option>
<option value="green">Grün</option>
<option value="blue">Blau</option>
</select>
</label>
</p>
<div>
<div class="figure">
<img class="thumb image" id="SrcImg" src="img/orion-nebula-space-galaxy_w725_h490.jpg" alt="Orion" />
<div class="caption">Ausgangsbild</div>
</div>
<div class="figure">
<canvas class="thumb image" id="SrcImgHistCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Histogramm des Ausgangsbildes mit Transformationskennlinie</div>
</div>
</div>
<div class="clear_both">
<div class="figure">
<canvas class="thumb image" id="tab3TransformedImgCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Transformiertes Bild</div>
</div>
<div class="figure">
<canvas class="thumb image" id="tab3TransformedImgHistCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Histogramm des transformierten Bildes</div>
</div>
</div>
</div>
<div class="tabpage" id="tabpage_4">
<div class="pointOperatorHorizontalblock">
<div class="pointOperatorSelectionBlock">
<p id="pointOperatorType">
<select id="tab4PointOperatorSelect">
<option value="negative">Negativtransformation (Invertierung)</option>
<option value="potency">Potenztransformation (Gammakorrektur)</option>
<option value="logarithm">Logarithmustransformation</option>
<option value="exponential">Exponentialtransformation</option>
<option value="shift">Histogrammverschiebung (Helligkeitskorrektur)</option>
<option value="limit">Histogrammbegrenzung</option>
<option value="spread">Histogrammspreizung + Begrenzung (Kontrastkorrektur)</option>
<option value="equal">Histogrammequalisierung</option>
<option value="hyperbol">Histogrammhyperbolisation</option>
<option value="quant">Quantisierung</option>
<option value="threshhold">Schwellwertoperation</option>
</select>
</p>
<fieldset class="pointOperatorSettingsFieldSet">
<legend>Parameter</legend>
<div id="tab4PointOperatorSettingsDiv">keine Parameter vorhanden</div>
<button id="tab4PointOperatorSettingsApply" type="button" style="display:none; margin-left:auto;">Übernehmen</button>
</fieldset>
</div>
<fieldset class="pointOperatorDescription">
<legend>Beschreibung</legend>
<div id="tab4PointOperatorDescription" ></div>
</fieldset>
<div class="clear_both"></div>
</div>
<div class="pointOperatorResult">
<div class="pointOperatorSource">
<p>
<br/>
<label>Bild:
<select id="tab4SrcImgSelect">
<option value="img/tuolumne-meadows-yosemite-streams_w725_h544.jpg">Yosemite</option>
<option value="img/thermal-hot-spring_w725_h544.jpg" selected>Thermalquelle</option>
<option value="img/rays-on-the-meadow_w725_h544.jpg">Aue</option>
<option value="img/autumn-big-maple-leaves_w725_h544.jpg">Blätter</option>
<option value="img/aircraft-ready-to-take-off-vintage-image_w725_h475.jpg">Flugzeug</option>
<option value="img/Blackbird-sunset-03.jpg">Sonnenuntergang</option>
<option value="img/orion-nebula-space-galaxy_w725_h490.jpg">Orion</option>
<option value="img/northern-lights-scenic-aurora-borealis_w725_h483.jpg">Nordlichter (unterbelichtet - mit Absicht)</option>
<option value="img/snow-wallpapers_w725_h544.png">Schneelandschaft (geringe Dynamik)</option>
<option value="img/800px-C-130J_formation_low-level.jpg">C-130J (geringer Kontrast)</option>
<option value="img/Farbverlauf.jpg">Farbverlauf (Gleichverteilung)</option>
<option value="img/noise2d.jpg">Rauschen (Graustufen, Normalverteilung)</option>
<option value="img/noise5nn.jpeg">Rauschen (Farbe, Normalverteilung)</option>
<option value="user_upload" id="tab4SrcImgSelectOptionUserUpload">Datei öffnen...</option>
</select>
<div id="tab4SrcImgUploadDiv" style="display:none">
<p id="tab4SrcImgUploadInputText" style="display:none">Drag and Drop oder Datei-Auswahl-Dialog:</p>
<input type="file" id="tab4SrcImgUploadInput">
</div>
</label>
</p>
<p>
<label>Histogramm-Typ:
<select id="tab4HistTypeSelect">
<option value="brightness">Helligkeit</option>
<option value="rgb">RGB</option>
<option value="red">Rot</option>
<option value="green">Grün</option>
<option value="blue">Blau</option>
</select>
</label>
</p>
<div class="figure">
<img class="pointOperatorThumb image" id="tab4SrcImg" src="img/thermal-hot-spring_w725_h544.jpg" alt="Thermalquelle" />
<div class="caption">Ausgangsbild</div>
</div>
<div class="figure">
<canvas class="pointOperatorThumb image" id="tab4SrcImgHistCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Histogramm</div>
</div>
<div class="figure">
<canvas class="pointOperatorThumb image" id="tab4SrcImgCumHistCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Kumulatives Histogramm</div>
</div>
</div>
<div class="pointOperatorArrow">⇒</div>
<div class="pointOperatorTarget">
<div class="figure">
<canvas class="pointOperatorThumb image" id="tab4TransformedImgCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Transformiertes Bild</div>
</div>
<div class="figure">
<canvas class="pointOperatorThumb image" id="tab4TransformedImgHistCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Histogramm des transformierten Bildes</div>
</div>
<div class="figure">
<canvas class="pointOperatorThumb image" id="tab4TransformedImgCumHistCanvas" width="840" height="630">Your browser does not have support for the html5 canvas element. Please use a modern browser!</canvas>
<div class="caption">Kumulatives Histogramm des transformierten Bildes</div>
</div>
</div>
</div>
</div>
<div style="text-align:center">
<br/>
<hr/>
© 2014 Johannes Pietrzyk, Benjamin Worpitz
</div>
</div>
</div>
</div>
</body>
</html>