Hell-/Dunkel-Bild-Kombinator — ein PNG für weiße und schwarze Hintergründe
Führe ein Hellmodus- und ein Dunkelmodus-Bild zu einem einzigen transparenten PNG zusammen, das auf Weiß das helle Artwork und auf Schwarz das dunkle Artwork zeigt. Lade beide hoch, sieh dir das Ergebnis nebeneinander in der Vorschau an und lade genau eine theme-fähige Datei für Docs, READMEs oder UI herunter – alles im Browser.
Was der Hell-/Dunkel-Bild-Kombinator macht
Ein PNG, zwei Ansichten
Das Ergebnis ist eine pixelweise Alpha-Komposition: Auf einer weißen Fläche wirkt es wie dein helles Bild, auf einer schwarzen wie dein dunkles Bild. So kommt ein README, eine Docs-Seite oder eine UI mit einer einzigen Datei aus, statt mit zwei Dateien oder einer Media Query.
Zwei Upload-Felder mit Live-Vorschau
Wähle ein Hellmodus-Bild und ein Dunkelmodus-Bild; sobald beide geladen sind, erscheint das zusammengeführte PNG – einmal auf einer weißen und einmal auf einer schwarzen Karte, damit du beide Themes vor dem Download beurteilen kannst.
Fester PNG-Export
Der Download ist immer ein PNG namens light-dark-image.png, erzeugt mit canvas.toDataURL. Es gibt weder JPEG-, WebP- noch SVG-Ausgabe noch eine Qualitäts- oder Kompressionseinstellung.
Canvas in der Größe des größeren Bildes
Das Ergebnis übernimmt die größere Breite und die größere Höhe des Paares, und beide Quellbilder werden von der linken oberen Ecke aus auf diese Fläche gestreckt. Abweichende Seitenverhältnisse werden verzerrt statt mit Rand versehen oder beschnitten.
Lokal, ohne Regler
Dateien werden mit FileReader gelesen und auf einem Canvas zusammengesetzt – nichts wird hochgeladen. Es gibt keine Regler für Helligkeit, Kontrast, Größe, Position, Hintergrund oder Format; die einzigen Eingaben sind die beiden Bilder.
FAQ zu Hell-/Dunkel-Bildern
Wofür ist dieses Tool eigentlich gedacht?
Es macht aus einem Hellmodus-Artwork und einem Dunkelmodus-Artwork ein transparentes PNG, dessen Erscheinungsbild vom Hintergrund abhängt: Weiße Flächen zeigen die helle, schwarze Flächen die dunkle Version. Es ist für theme-fähige Assets in READMEs, Dokumentation und UI gedacht – kein Tool, das dir zwei getrennte Bilder erzeugt.
Welche Einstellungen kann ich anpassen?
Nur die beiden Quellbilder. Es gibt keine Regler für Helligkeit, Kontrast, Farbe, Position, Skalierung, Hintergrundfarbe, Format oder Qualität und auch keine Feinabstimmung der Zusammenführung; die Vorschaubereiche dienen nur der Anzeige.
Welche Eingabe- und Ausgabeformate werden unterstützt?
Die Eingabe nutzt accept="image/*" und den Decoder des Browsers, daher funktionieren JPEG, PNG, WebP und GIF; die Ausgabe ist immer PNG. Ein JPEG-, WebP- oder SVG-Export wird nicht angeboten.
Kann ich mehrere Paare gleichzeitig verarbeiten?
Nein. Jedes Feld nimmt nur die erste ausgewählte Datei, und die Seite verarbeitet immer nur ein Hell-/Dunkel-Paar – ohne Warteschlange, Stapelmodus oder Verlauf.
Gibt es Größenbeschränkungen, und was passiert bei unterschiedlichen Abmessungen?
Über den Canvas-Speicher des Browsers hinaus gibt es kein ausdrückliches Pixel-Limit. Die Ausgabe ist max(Breite) × max(Höhe), und beide Bilder werden von links oben auf diese Größe gestreckt; unterschiedliche Seitenverhältnisse werden also verzerrt, nicht aufgefüllt oder beschnitten.
Läuft alles lokal?
Ja. Die Bilder werden mit FileReader dekodiert und in einem Canvas im Browser zusammengeführt; nichts wird hochgeladen, kein Server ist beteiligt. Das Ergebnis bleibt als Data-URL im Speicher, bis du es herunterlädst.
Wie originalgetreu ist das Ergebnis?
Es ist eine Näherung. Helle Kanäle werden auf 128–255, dunkle auf 0–127 neu abgebildet, dann werden Alpha und Farbe so gelöst, dass das Paar auf reinem Weiß und reinem Schwarz korrekt zusammengesetzt wird; Farben werden quantisiert, extremer Kontrast kann Details verlieren, und die Formel ist nur auf rein weißem oder schwarzem Hintergrund exakt (graue oder getönte Flächen mischen anders). Die Transparenz stammt allein aus dem Alpha des hellen Bildes, und wenn die beiden Bilder die Helligkeitsannahme verletzen, wird das Pixel-Alpha auf null gesetzt.
