Man kann einen Porträt-Hintergrund im Browser entfernen, ohne das gewählte Foto an einen Inferenzdienst zu übertragen. Der Browser dekodiert die Datei, ein Segmentierungsmodell berechnet eine Personenmaske und Canvas setzt diese Maske als Transparenz ein. Auch die Erzeugung der herunterladbaren PNG-Datei findet im geöffneten Tab statt.
Eine solche Architektur passt zu klar begrenzten Aufgaben: Profilbilder, Vortragsslides, Thumbnails oder einfache Porträts. Sie benötigt weder einen Bildverarbeitungsserver noch einen API Key. Sie sollte jedoch nicht als universelles Freistellwerkzeug für Produkte, Tiere und beliebige Gegenstände beworben werden. Das verwendete Modell wurde für Menschen entwickelt.
Die technische Entscheidung beginnt beim Einsatzzweck
Wisly nutzt MediaPipe Image Segmenter mit dem Selfie-Segmentation-Modell. Laut Google trennt die quadratische Variante zwei Kategorien: Hintergrund an Index 0 und Person an Index 1. Die Eingabe des Modells hat 256 × 256 Pixel und verwendet float16. Die Modellkarte nennt für das Modell selbst ungefähr 249 KB. Die vollständige Browser-Laufzeit ist größer als diese einzelne Modelldatei.
Diese Eigenschaften erklären sowohl die Stärke als auch die Grenze. Das Modell ist klein und für reaktionsfähige Anwendungen auf unterschiedlichen Geräten optimiert. Seine niedrige Eingabeauflösung kann aber keine beliebig feinen Strukturen garantieren. Haare, Finger, Bewegungsunschärfe und halbtransparente Stoffe enthalten oft unsichere Übergänge.
Ein geeignetes Foto zeigt eine Person relativ groß, bei ausreichendem Licht und mit erkennbarer Trennung vom Hintergrund. Eine weit entfernte Person, mehrere Personen in stark unterschiedlichen Größen oder Kleidung mit nahezu identischer Hintergrundfarbe sind deutlich schwierigere Eingaben.
Der Datenfluss bleibt im Tab
Der Ablauf lässt sich ohne Marketingbegriffe beschreiben:
- Der Nutzer wählt eine JPEG-, PNG- oder WebP-Datei aus.
- Der Browser dekodiert die Datei lokal in Pixel.
- JavaScript zeichnet diese Pixel auf eine Quell-Canvas.
- WebAssembly führt die Personensegmentierung aus.
- Die Konfidenzmaske wird in einen Alphakanal umgerechnet.
- Canvas kombiniert Person und gewählten Hintergrund.
- Der Browser erzeugt einen PNG-Blob für den Download.
In diesem Ablauf gibt es keinen Upload-Endpunkt für das Foto. Dateidaten müssen weder in einer Datenbank noch in einem Objektspeicher abgelegt werden. Wisly liefert JavaScript, WebAssembly und Modell vom eigenen Ursprung aus. Dadurch kann die Content Security Policy Verbindungen auf bekannte Ziele beschränken.
Lokale Verarbeitung bedeutet trotzdem nicht automatisch Offline-Betrieb. Beim ersten Besuch müssen Seite, Laufzeit und Modell über das Netz geladen werden. Ein Browser-Cache kann spätere Aufrufe beschleunigen, ist aber keine verlässliche Offline-Funktion. Dafür wären ein Service Worker, eine vollständige Cache-Liste und eine Update-Strategie notwendig. Solange diese Schicht fehlt, ist "lokal verarbeitet" die präzise Aussage.
Die Maske ist wichtiger als ein Ja-Nein-Ergebnis
Das Modell liefert nicht direkt ein ausgeschnittenes Porträt. Es liefert Konfidenzwerte für die unterstützten Kategorien. Für jedes Maskenpixel liegt ein Wert nahe 0 bis 1 vor. Ein hoher Wert in der Personenmaske bedeutet hohe Sicherheit für Vordergrund. Ein niedriger Wert spricht für Hintergrund. Zwischenwerte konzentrieren sich meist an Konturen.
Eine harte Umsetzung wäre:
Wert über Schwellwert: vollständig sichtbar
Wert unter Schwellwert: vollständig transparentDiese Methode ist schnell, erzeugt aber leicht harte Kanten. Eine glatte Übergangsfunktion um den Schwellwert wandelt unsichere Pixel schrittweise in Transparenz um. Dadurch wirken Haare und Schultern natürlicher. Eine zu breite Übergangszone kann allerdings einen farbigen Saum des früheren Hintergrunds bewahren.
Der Regler für die Kantenglättung verändert genau diese Zuordnung. Die Inferenz muss dabei nicht erneut ausgeführt werden. Die vorhandenen Konfidenzwerte werden nur neu in Alpha-Werte übersetzt und noch einmal mit dem Original kombiniert. Deshalb reagiert die Vorschau direkt.
Ein Regler kann jedoch keine fehlende Information erzeugen. Wenn das Modell einen ganzen Finger oder Arm als Hintergrund bewertet, lässt sich dieser Bereich mit einer kleinen Schwellenkorrektur nicht zuverlässig rekonstruieren. Für anspruchsvolle Freisteller sind ein spezialisiertes Matting-Modell oder manuelle Korrekturwerkzeuge nötig.
Vom Maskenbild zur transparenten PNG
Für die Ausgabe verwendet die Seite mehrere Canvas-Flächen. Die Quell-Canvas enthält die dekodierte Aufnahme. Eine kleine Masken-Canvas nimmt die Modellwerte auf. Eine weitere Canvas kombiniert das Original mit dieser Maske, sodass nur die Person übrig bleibt. Die Ausgabe-Canvas erhält entweder Transparenz oder zuerst eine Hintergrundfarbe und danach die freigestellte Person.
Die Maske wird von ihrer Modellauflösung auf die Ausgabedimensionen skaliert. Glatte Interpolation vermeidet unnötige Blockkanten, ersetzt aber keine Details, die in der Vorhersage fehlen. Der Alphakanal bestimmt schließlich, wie stark jeder Originalpixel sichtbar bleibt.
PNG ist das Standardformat, weil es Transparenz speichern kann. JPEG besitzt keinen Alphakanal und muss transparente Bereiche durch eine Farbe ersetzen. WebP könnte ebenfalls Transparenz tragen, doch PNG ist für Präsentationen, Bildbearbeitung und Profilgrafiken eine leicht verständliche Ausgabe.
Große Kamerafotos benötigen besondere Speichergrenzen. Eine komprimierte Datei von wenigen Megabyte wird nach dem Dekodieren zu vier Farbkanälen pro Pixel. Quellbild, Maske, Vordergrund und Ausgabe können gleichzeitig Speicher belegen. Das Werkzeug akzeptiert deshalb höchstens 15 MB und verkleinert eine Kante über 4096 Pixel. Diese Änderung wird angezeigt, anstatt eine unveränderte Originalauflösung zu suggerieren.
Warum die erste Verarbeitung länger dauert
Zur wahrgenommenen Dauer gehören mehr Schritte als die eigentliche Modellrechnung. Beim ersten Einsatz lädt und kompiliert der Browser WebAssembly, liest das Modell ein und dekodiert das Foto. Danach folgen Vorverarbeitung, Segmentierung, Maskenskalierung, Canvas-Komposition und PNG-Kodierung. Weitere Bilder in derselben Sitzung können die bereits initialisierte Segmenter-Instanz wiederverwenden.
Google veröffentlicht Benchmarks für Referenzgeräte. Solche Werte sind kein Versprechen für jedes Smartphone oder Notebook. Browser, freier Arbeitsspeicher, Energiesparmodus und Bildgröße beeinflussen die Dauer. Sinnvoller als eine feste Sekundenangabe sind getrennte Zustände für Modellladen und Bildverarbeitung.
Die MediaPipe-Webdokumentation weist außerdem darauf hin, dass segment() synchron läuft und den UI-Thread vorübergehend blockiert. Für ein einzelnes Standbild ist eine kurze, angekündigte Verarbeitung vertretbar. Video oder Stapelverarbeitung sollten in einen Web Worker verschoben werden, damit wiederholte Inferenz die Bedienung nicht blockiert.
Bekannte Modellgrenzen
Die offizielle Modellkarte nennt konkrete Einschränkungen. Dünne Merkmale wie Finger können verloren gehen. Schlechte Beleuchtung, Bildrauschen, schnelle Bewegung und große Verdeckungen verschlechtern die Vorhersage. Personen in großer Entfernung liegen außerhalb des vorgesehenen Bereichs. Bei mehreren Menschen kann das Modell einige oder alle erfassen, insbesondere wenn ihre Größen ähnlich sind, doch stark unterschiedliche Maßstäbe bleiben schwierig.
Das Modell ist auf Geschwindigkeit und breite Geräteunterstützung optimiert, nicht auf pixelgenaues Studio-Matting. Das ist für einen schnellen Porträtentwurf oft ein guter Tausch. Für Produktkataloge, transparente Stoffe oder eine druckfertige Haarmaske wäre diese konkrete Modellwahl nicht ausreichend.
Datenschutz und Lizenz gehören zum Produkt
Ein lokaler Ablauf reduziert die Übertragung sensibler Fotos. Er bleibt nur dann glaubwürdig, wenn das System keine Dateinamen oder Inhalte in Telemetrie und Fehlerprotokolle schreibt, keine unnötigen Drittanbieter-Skripte nachlädt und keine Geheimnisse im Clientcode enthält. Ein API Key wäre in diesem Aufbau ohnehin überflüssig.
Auch die Lizenz muss vor dem Einbau geklärt sein. Kostenloser Zugang zu einer Demo sagt nichts darüber aus, ob eine Abhängigkeit ohne weitere Pflichten in eine geschlossene Website integriert werden darf. Wisly verwendet MediaPipe Tasks Vision und das Selfie-Segmentation-Modell unter Apache License 2.0 und liefert Lizenzkopie sowie Herkunftshinweise mit den statischen Ressourcen aus.
Das Werkzeug ausprobieren
Mit dem Werkzeug Porträt-Hintergrund kostenlos entfernen lässt sich der beschriebene Ablauf direkt testen. Nach der lokalen Segmentierung können Kantenglättung und Hintergrund angepasst werden. Die Ausgabe wird als PNG heruntergeladen.
Für den ersten Test empfiehlt sich ein gut beleuchtetes Porträt, bei dem die Person einen großen Teil des Bildes einnimmt. Der wichtigste Vorteil ist nicht eine angebliche Universalität, sondern die Kombination aus klarer Aufgabe, nachvollziehbarem Datenfluss, ehrlichen Grenzen und einer sofort nutzbaren Datei.