How I Built A Browser-Side Background Remover
I had 300 product photos to process. I needed to remove their backgrounds for a Shopify store.
I did not want to upload these unreleased photos to a random server. I wanted a solution that runs locally in the browser.
I tested two different methods to see which works best.
Method 1: Canvas API This method uses pixel manipulation. You pick a color from the corner and set all similar pixels to transparent.
• Pros: Extremely fast. No extra files to download. Uses almost no memory. • Cons: It fails if the background has shadows, gradients, or textures. It creates jagged edges.
Method 2: WebAssembly (WASM) + Machine Learning This method uses an ML model via ONNX Runtime Web to understand what is a person or object.
• Pros: Handles hair, fur, and complex edges. Works on almost any background. • Cons: You must download an 8MB model. It uses much more CPU and memory.
The Results I tested 500 images on a MacBook Pro. Here is how they compared:
- Canvas speed: 12-18 ms per image.
- WASM speed: 180-220 ms per image.
- Canvas accuracy: 187 out of 500 images.
- WASM accuracy: 412 out of 500 images.
My Solution: The Hybrid Approach I built a tool that uses both. It tries the Canvas method first. If the background is too complex, it switches to the ML model. This averages 40 ms per image.
Technical Tips for You:
- getImageData() causes a delay because it moves data from the GPU to the CPU. Batch your operations to save time.
- Use the WebGL backend in ONNX Runtime for 3-5x faster speeds.
- Stick to 256x256 input size for models. Larger sizes make the process 4x slower without enough benefit for product photos.
If you need a quick fix for simple photos, use Canvas. If you need quality, use Machine Learning.
Optional learning community: https://t.me/GyaanSetuAi