Bild-Graustufen-Umwandlungstool

Die Umwandlung in Graustufen entfernt Farbinformationen aus einem Bild und stellt es nur noch mit Schwarz, Weiß und Grauwerten dar. Gute Graustufen sind nicht einfach der Durchschnitt von Rot, Grün und Blau; häufig wird eine gewichtete Formel wie R×0.299 + G×0.587 + B×0.114 genutzt, weil das menschliche Auge Grün stärker wahrnimmt als Blau. Dadurch bleiben Helligkeit, Kontrast und wichtige Details natürlicher erhalten. Das Verfahren ist nützlich für Schwarzweißfotografie, Dokumentenscans, Ausweisfoto-Vorbereitung, Drucktests, Vintage-Design und Bildanalyse. Bei farbcodierten Diagrammen oder UI-Screenshots sollte geprüft werden, ob Informationen durch die Entsättigung verloren gehen. Vor Veröffentlichung oder Abgabe sollte die Ausgabedatei geöffnet und auf Lesbarkeit, Zuschnitt, Auflösung und fehlende Inhalte geprüft werden.

Die Graustufenumwandlung transformiert jeden Pixel aus dem RGB-Farbraum in einen einzelnen Helligkeitswert, der die wahrgenommene Helligkeit repräsentiert. Dieses Werkzeug verwendet die Luminositätsmethode (auch gewichtete Durchschnittsmethode genannt), definiert durch den ITU-R BT.601-Standard für Standardauflösungsfernsehen: Gray = R × 0,299 + G × 0,587 + B × 0,114. Diese Koeffizienten spiegeln die Empfindlichkeit des menschlichen visuellen Systems wider – die Zapfenzellen der Netzhaut sind zu etwa 64 % rot-empfindlich (L-Zapfen), 32 % grün-empfindlich (M-Zapfen) und 2 % blau-empfindlich (S-Zapfen), und die Gewichte nähern sich dem Helligkeitsbeitrag jedes Kanals zur wahrgenommenen Helligkeit an. Grün dominiert mit 58,7 %, weil das menschliche Sehen im grün-gelben Bereich des Spektrums (~555 nm) am schärfsten ist. Zum Vergleich erzeugen andere gängige Graustufenmethoden unterschiedliche Ergebnisse. Die Durchschnittsmethode (Gray = (R + G + B) / 3) behandelt alle Kanäle gleich und produziert unnatürlich dunkles Rot und unnatürlich helles Blau. Die Entsättigungsmethode im HSL/HSV-Farbraum setzt die Sättigung auf Null, was perzeptuell genauer als der Durchschnitt, aber weniger genau als die Luminositätsgewichtung ist. Die Luma-Methode aus ITU-R BT.709 (HDTV-Standard) verwendet leicht unterschiedliche Koeffizienten (0,2126, 0,7152, 0,0722), die für moderne Displays mit anderem Weißpunkt genauer sind. Die hier verwendeten BT.601-Koeffizienten bleiben die am weitesten implementierten und erzeugen natürlich wirkende Ergebnisse über den breitesten Bereich von Eingabebildern. Die Verarbeitungspipeline läuft vollständig im Browser. Das hochgeladene Bild wird vom nativen Bilddecoder des Browsers decodiert (unterstützt JPEG, PNG, WebP, BMP und GIF) in ein HTMLImageElement. Das Bild wird über ctx.drawImage() auf ein Canvas-Element gezeichnet, was den GPU-beschleunigten Kompositor des Browsers auslöst, um Farbraumkonvertierung und Skalierung durchzuführen. getImageData() liest den rohen RGBA-Pixelpuffer als Uint8ClampedArray zurück – jeder Pixel belegt 4 aufeinanderfolgende Bytes (R, G, B, A), sodass die Array-Länge Breite × Höhe × 4 beträgt. Die Graustufenschleife iteriert mit einer Schrittweite von 4 (i += 4), berechnet die gewichtete Summe und schreibt denselben Grauwert in alle drei RGB-Kanäle, wobei der ursprüngliche Alphakanal erhalten bleibt. putImageData() schreibt den modifizierten Puffer zurück auf die Canvas. Schließlich kodiert canvas.toBlob('image/png') das Ergebnis als verlustfreies PNG, und URL.createObjectURL() erstellt eine blob: URL für den Download-Link. Für die Stapelverarbeitung wird jedes Bild sequentiell verarbeitet, um den Hauptthread nicht zu überlasten – die Schleife wartet jedes Konvertierungs-Promise ab, bevor sie mit dem nächsten beginnt. Die Canvas wird für Bilder wiederverwendet, anstatt sie neu zu erstellen, wodurch GPU-Textur-Zuweisungs-Overhead vermieden wird. Die ursprünglichen File-Objekte werden alongside den Graustufen-Blobs beibehalten, sodass der Download-Dateiname vom Originaldateinamen mit angehängtem '_grayscale' abgeleitet werden kann.

• ITU-R BT.601-Luminanzkoeffizienten: R × 0,299 + G × 0,587 + B × 0,114 – abgeleitet von der photopischen Helligkeitsfunktion des CIE-1931-Standardbeobachters modellieren diese Gewichte die Zapfenzellverteilung der menschlichen Netzhaut (L:M:S ≈ 64:32:2) und die Spitzenempfindlichkeit bei 555 nm (Gelbgrün).
• Methodenvergleich: Durchschnitt (R+G+B)/3 erzeugt dunkles Rot und helles Blau; Entsättigung (HSL S=0) ist besser, aber nicht perzeptuell gleichmäßig; BT.709-Luma (0,2126R + 0,7152G + 0,0722B) ist genauer für HDTV-Displays, aber die hier verwendeten BT.601-Gewichte sind die am weitesten unterstützten in Browsern und Bildwerkzeugen.
• Canvas-Pixel-Pipeline: drawImage() → GPU-Kompositor decodiert und skaliert → getImageData() liest RGBA Uint8ClampedArray → per-Pixel-gewichtete Summensschleife (Schrittweite 4, i += 4) → putImageData() schreibt zurück → toBlob('image/png') kodiert als verlustfreies PNG → createObjectURL() zum Download.
• Alphakanal-Erhaltung: Das Alpha-Byte (Index i+3) wird gelesen, aber nicht modifiziert – transparente Pixel bleiben transparent, und die ursprünglichen Alphawerte werden unverändert durchgereicht, was für PNG-Bilder mit Transparenz oder Antialiasing-Kanten wichtig ist.
• Sequenzielle Stapelverarbeitung: Jedes Bild wird einzeln per await verarbeitet, um den Hauptthread nicht zu überlasten – das Canvas-Element wird für Bilder wiederverwendet, und File-Objekte werden beibehalten, sodass Download-Dateinamen vom Originalnamen mit angehängtem '_grayscale' abgeleitet werden können.
• Gamma-Betrachtung: Die BT.601-Koeffizienten werden auf gamma-kodierte sRGB-Werte angewendet, nicht auf lineare Lichtintensitäten – dies ist der Standardansatz und liefert visuell korrekte Ergebnisse für die Darstellung, aber Anwendungen, die physikalische Lichtmessungen erfordern (wissenschaftliche Bildgebung, Photometrie), sollten die sRGB-Werte zuerst linearisieren.
• Speicherverwaltung: Jeder Graustufen-Blob wird über eine Objekt-URL im Speicher gehalten, bis das Bild entfernt oder die Seite geschlossen wird – das Aufrufen von URL.revokeObjectURL() beim Entfernen verhindert Speicherlecks, und der Speicher des Blobs wird freigegeben, wenn keine Referenzen mehr vorhanden sind.