Bildfilter

Bildfilter funktionieren, indem sie die Farbe jedes Pixels in Echtzeit transformieren. Jeder Filter wendet eine kleine mathematische Operation auf die Rot-, Grün- und Blaukanäle jedes Pixels an: brightness(150%) multipliziert sie mit 1,5, um das Bild aufzuhellen, grayscale(100%) mittelt sie zu einem einzelnen Grauton, und blur(4px) mischt jeden Pixel mit seinen Nachbarn mithilfe eines Faltungskerns. Da dies auf Ihrer GPU über die HTML-Canvas-API läuft, aktualisiert sich die Vorschau in dem Moment, in dem Sie einen Schieberegler ziehen — kein Warten, kein Upload, kein Server-Roundtrip.

Es gibt zwei breite Gruppen. Korrekturfilter ändern Ton und Farbe, während das Foto natürlich aussieht — Helligkeit, Kontrast, Sättigung und Farbton drehen fallen hier hinein. Effektfilter gestalten das Bild in einen anderen Look um — Graustufen (Schwarz-Weiß), Sepia (warmes Vintage), Invertieren (Negativ), Unschärfe (Weichzeichner) und Opazität (Transparenz). Dieser Editor gibt Ihnen alle neun CSS-Filterfunktionen. Sie zu stapeln — beispielsweise grayscale(100%) mit contrast(120%) — ist genau so, wie benannte Presets wie Vintage, Noir und Verblasst aufgebaut sind.

Legen Sie ein Foto in das Feld oben ab (oder klicken Sie zum Durchsuchen, oder fügen Sie mit Strg/Cmd+V ein), klicken Sie dann auf eine Preset-Miniaturansicht oder ziehen Sie die Anpassungsschieberegler. Die Vorschau aktualisiert sich in Echtzeit, und ein Vorher/Nachher-Griff ermöglicht den Vergleich mit dem Original jederzeit. Wenn Ihnen das Ergebnis gefällt, klicken Sie auf PNG herunterladen oder JPG herunterladen, um in voller Auflösung zu speichern. Nichts wird hochgeladen — jeder Schritt läuft in Ihrem Browser.

Die CSS-filter-Eigenschaft wendet grafische Effekte auf jedes HTML-Element mit einer Kette von Filterfunktionen an: brightness(), contrast(), saturate(), grayscale(), sepia(), hue-rotate(), invert(), blur() und opacity(). Zum Beispiel gibt filter: contrast(120%) saturate(140%) sepia(15%); einen kräftigen, leicht warmen Look. Dieses Tool baut genau diese Zeichenkette auf, während Sie die Schieberegler bewegen, sodass Sie sie direkt in Ihr Stylesheet kopieren können.

Instagram-ähnliche Filter sind voreingestellte Kombinationen grundlegender CSS-Filterfunktionen. Ein Clarendon-ähnlicher Look ist ungefähr contrast(120%) saturate(135%), ein verblasster Film-Look verwendet contrast(85%) brightness(110%) sepia(12%), und ein kräftiger Vivid-Ton stapelt contrast(130%) saturate(160%). Klicken Sie auf eine Preset-Miniaturansicht in der Galerie, um es sofort auf Ihr Foto anzuwenden, und passen Sie dann die einzelnen Schieberegler an, um den Look weiter zu verfeinern.

Für Schwarz-Weiß setzen Sie Graustufen auf 100 % — das S&W-Preset macht das mit einem Klick, und Noir fügt zusätzlichen Kontrast für einen dramatischen Effekt hinzu. Für Sepia erhöhen Sie den Sepia-Schieberegler; sepia(80%) ergibt einen klassischen brauntönigen Druck. Für einen Vintage-Look kombinieren Sie beides: Das Vintage-Preset verwendet sepia(55%) contrast(108%) brightness(104%) saturate(120%) für ein warmes, leicht gewaschenes Filmgefühl. Canva und Adobe Express können ähnliches, erfordern aber eine Anmeldung.

Es hängt vom Tool ab. Viele Online-Editoren — Fotor, LunaPI, Pixlr — laden Ihr Foto zur Verarbeitung auf ihre Server hoch, was bedeutet, dass Ihr Bild auf dem Computer von jemand anderem liegt und möglicherweise für Analysen oder Modelltraining aufbewahrt wird. UtiloKits Bildfilter läuft vollständig auf einem HTML-Canvas in Ihrem Browser: Ihr Bild wird lokal gelesen, lokal verarbeitet und lokal heruntergeladen — es wird niemals hochgeladen, niemals gespeichert und von niemandem außer Ihnen gesehen.