Wie ich einen Hintergrundentferner direkt im Browser gebaut habe
Ich hatte 300 Produktfotos zu bearbeiten. Ich musste deren Hintergründe für einen Shopify-Store entfernen.
Ich wollte diese unveröffentlichten Fotos nicht auf irgendeinen Server hochladen. Ich wollte eine Lösung, die lokal im Browser läuft.
Ich habe zwei verschiedene Methoden getestet, um zu sehen, welche am besten funktioniert.
Methode 1: Canvas API
Diese Methode nutzt Pixelmanipulation. Man wählt eine Farbe aus einer Ecke aus und setzt alle ähnlichen Pixel auf transparent.
• Vorteile: Extrem schnell. Keine zusätzlichen Dateien zum Herunterladen. Verbraucht fast keinen Arbeitsspeicher. • Nachteile: Sie scheitert, wenn der Hintergrund Schatten, Verläufe oder Texturen hat. Sie erzeugt gezackte Kanten.
Methode 2: WebAssembly (WASM) + Machine Learning
Diese Methode nutzt ein ML-Modell über ONNX Runtime Web, um zu erkennen, was eine Person oder ein Objekt ist.
• Vorteile: Bewältigt Haare, Fell und komplexe Kanten. Funktioniert bei fast jedem Hintergrund. • Nachteile: Man muss ein 8 MB großes Modell herunterladen. Es verbraucht deutlich mehr CPU und Arbeitsspeicher.
Die Ergebnisse
Ich habe 500 Bilder auf einem MacBook Pro getestet. Hier ist der Vergleich:
- Canvas-Geschwindigkeit: 12–18 ms pro Bild.
- WASM-Geschwindigkeit: 180–220 ms pro Bild.
- Canvas-Genauigkeit: 187 von 500 Bildern.
- WASM-Genauigkeit: 412 von 500 Bildern.
Meine Lösung: Der Hybrid-Ansatz
Ich habe ein Tool gebaut, das beides nutzt. Es versucht es zuerst mit der Canvas-Methode. Wenn der Hintergrund zu komplex ist, wechselt es zum ML-Modell. Das ergibt im Durchschnitt 40 ms pro Bild.
Technische Tipps für dich:
getImageData()verursacht eine Verzögerung, da Daten von der GPU zur CPU verschoben werden. Gruppiere deine Operationen (Batching), um Zeit zu sparen.- Nutze das WebGL-Backend in ONNX Runtime für eine 3- bis 5-mal höhere Geschwindigkeit.
- Halte die Eingabegröße für Modelle bei 256x256 Pixeln. Größere Formate machen den Prozess 4-mal langsamer, ohne einen nennenswerten Vorteil für Produktfotos zu bieten.
Wenn du eine schnelle Lösung für einfache Fotos brauchst, nutze Canvas. Wenn du Qualität benötigst, nutze Machine Learning.
Optionale Lern-Community: https://t.me/GyaanSetuAi