The browser has become a surprisingly capable platform for computer vision. In this post, I'll walk through building a fully client-side ID photo maker — covering multi-tier face detection, anthropometric head measurement, segmentation-refined cropping, and background removal with color decontamination.
The Face Detection Problem
ID photos have strict requirements: head height ratios, eye-line positions, margin rules. Tools like HivisionIDPhotos, dpar39/ppp, and commercial services like dreamega.ai and photoaid.com all need to solve the same core problem: given an uploaded portrait, detect the face accurately enough to auto-crop to spec.
Server-side tools can afford heavyweight models (HivisionIDPhotos uses ONNX runtime with dedicated face parsing networks). But if you want to run everything client-side — no upload, no server cost, instant preview — the browser environment is unpredictable. Not every user has Chrome's experimental FaceDetector API, and WebGL support varies.
Our solution: a three-tier detection chain that tries the best option first and gracefully falls back.
