Back to feed
Dev.to
Dev.to
7/28/2026
Building a Browser-Based ID Photo Maker: Face Detection, Head Estimation & Background Removal

Building a Browser-Based ID Photo Maker: Face Detection, Head Estimation & Background Removal

Short summary

A detailed technical walkthrough of building a fully client-side ID photo maker using a three-tier face detection chain: MediaPipe (478 landmarks) as primary, Chrome's FaceDetector API as fallback, and BlazeFace TensorFlow model as last resort. The article covers anthropometric head height estimation using IPD formulas and hair-volume multipliers, plus segmentation-refined cropping for compliance with ID photo standards.

  • •Three-tier detection chain: MediaPipe → Browser FaceDetector → BlazeFace for graceful degradation
  • •Head height estimated via forehead-to-chin distance with 1.35x hair multiplier or IPD-based anthropometric formula
  • •All processing runs client-side with no server uploads, leveraging WebGL and varying browser API support

Generated with AI, which can make mistakes.

#ai-tools
Read full article at Dev.to

Is this a good recommendation for you?

Comments

Failed to load comments. Please try again.

Explore more

Removing a Photo's Background in the Browser, With No Upload: AI Licenses, ONNX Models, and a Frozen Tab
Dev.to
How I built a browser-only face-rating app with Next.js + MediaPipe (no upload, $0 per scan)
Dev.to
How I built a browser-side background remover (and benchmarked Canvas vs WebAssembly)
Dev.to
The original title is "Building a Browser-Based Passport Photo Maker with Country Presets"
Dev.to