RGB-Profil einer Pixel-Grafik

Javascript Blob

Zielgruppe sind IT-StudentInnen und interessierte Amateure
Für das Live-Beispiel sind keine Vorkenntnisse notwendig.


Live RGB-Profil

Kommentar zum Live-Beispiel



Mit Klick auf die unterhalb des Profils angezeigten Farben wird das jeweilige Profil abwechselnd angezeigt oder gelöscht. Wenn alle 3 RGB-Farben abgeschaltet sind, dann wird immer das Profil der Helligkeit angezeigt.

Mit Klick auf die links unten angezeigten Taste können sie Bild-Dateien vom eigenen PC laden und ihr RGB-Profil studieren. Die Bilder werden auf 450x450 Pixel vergrößert oder verkleinert, restliche Flächen werden mit Grau gefüllt. (Tipp: Pixel-TestBilder)



In der Informatik werden alle Farben durch → Addition aus diesen 3 Grundfarben zusammengesetzt.

Im RGB-Profil werden die RGB-Daten des Bildes entlang der vertikalen Linie gemessen und angezeigt. Das Profil zeigt entweder die Daten der Farben oder die (arithmetisch) mittlere Helligkeit an.



Die Helligkeit ist direkt aus dem RGB-Profil ablesbar:
In dunklen Bereichen bewegen sich die Profile aller 3 RGB-Farben mehr oder weniger weit links, in hellen Bereichen rechts. Mit Klick auf das Wort 'Hell' wird die (rechnerische) Gesamt-Helligkeit als weiße Linie angezeigt.
Details zur → Einstellung der Helligkeit mit Bild-Bearbeitung

Die Sättigung gibt an, wie weit eine Farbe von der Grau-Linie entfernt ist: Diese ist definiert, wo die Werte aller 3 Grundfarben gleich sind. Sie reicht daher je nach Helligkeit von Schwarz über Grau bis Weiß.
Stumpfe Farben zeigen ähnliche Werte aller 3 RGB-Farben, bei bunten Farben weicht der Wert mindestens einer Farbe deutlich von den beiden anderen ab.



Bei Über-Belichtung trifft so viel Licht auf einzelne Pixel, dass die Farb-Werte von mindestens 1 der 3 RGB-Farben den Sättigungs-Wert 100% (im Profil ganz rechts) erreichen.
Über-Belichtung kommt relativ oft vor, z.B. wenn man bei hellem Sonnenlicht auch Objekte im tiefen Schatten aufnimmt.
Man erkennt Über-Belichtung, wenn das Profil von zumindest einer der 3 RGB-Farben über einen längeren Bereich an der rechten Profil-Grenze liegt.
Wenn sich das Profil von mindestens 1 anderen Farbe im betroffenen Bereich ändert, dann sind darin noch Details erkennbar - wenn nicht, dann ist auch die → Nach-Bearbeitung erfolglos.



Mit einem Experiment kann man sich davon überzeugen:
Die Web-App funktioniert auch bei getrennter Netz- und Internet-Verbindung. Eine Bild-Datei vom eigenen PC wird in den Arbeits-Speicher geladen und dort vom javascript-Programm analysiert.
Bei getrennter Verbindung kann die Web-App allerdings keine Test-Bilder vom Webserver anfordern.

Programmierung


Portablilität

Die hier vorgestellte Web-App enthält alle verwendeten Resourcen mit Ausnahme der Testbilder und ist daher portabel: Wenn sie beim Start ein Standard-Bild anzeigen soll, dann muss man dazu eine Pixel-Grafik-Datei bereitstellen.
Details dazu im Quelltext der Web-App.


Web-Technologie

Die Details der verwendeten Technologie erfordern zum Verständnis Grundkenntnisse von → HTML, → CSS, → Javascript und → SVG sowie fortgeschrittenen Kenntnisse von → DOM-Methoden, → Canvas und des → Javascript File-API.

Eine eigene → EntwicklerInnen-Version der gleichen Web-App kommentiert die Details der→ Programmierung.