PassportPhotoBox：我如何在瀏覽器中建立 AI 輔助護照相片工作室

Getting a passport photo taken in 2026 is still surprisingly painful.

You either visit a pharmacy or studio and pay $15–$25 for two tiny prints, or take a selfie at home and risk an application rejection because your head size was 2mm off, the lighting was uneven, or the background wasn't the exact shade of off-white required by the consulate.

I wanted a better, faster, and cheaper way to do this from home without sacrificing government compliance.

Here is how I built PassportPhotoBox an in-browser passport and visa photo maker and the technical choices behind it.

🎯 The Core Problem

Different countries have wildly different biometric photo standards:

US & India: 2 × 2 inches (51 × 51 mm), with head height between 50% and 69%.
UK & Schengen Area: 35 × 45 mm, with face height between 32 mm and 36 mm.
Canada: 50 × 70 mm, with specific head-to-chin proportions.

Most existing online tools either require an expensive subscription, spam users with ads, or worst of all upload personal facial photos to unknown remote servers.

I set out to build a platform guided by three rules:

Accurate compliance for 100+ country standards.
Privacy first: Process images in the user’s browser as much as possible.
Print-ready output: Generate 300 DPI 4×6-inch sheets so users can print 4–6 photos at any local print kiosk for under 50 cents.

🛠️ The Tech Stack

I chose a modern, performance-focused stack:

Framework: Next.js (App Router) + React 19 + TypeScript
Styling: Tailwind CSS + Radix UI primitives
Vision & AI: @mediapipe/tasks-vision (client-side face landmark detection)
Image & Canvas Processing: Native HTML5 Canvas API
Document & Print Generation: pdf-lib (for generating exact 300 DPI print-ready sheets)
Backend & Auth: Supabase (PostgreSQL + Auth + Edge Functions)

🏗️ How It Works (High-Level Pipeline)

The photo pipeline follows four simple steps:

[User Photo] 
    │
    ▼
[Client-Side Face Detection (MediaPipe)]
    │
    ▼
[Biometric Alignment & Crop (HTML5 Canvas)]
    │
    ▼
[Background Cleanup & Contrast Fine-Tuning]
    │
    ▼
[Single Digital File + 4x6" Print-Ready Sheet (300 DPI)]

1. In-Browser Face & Landmark Detection

Instead of sending raw user selfies across the internet to an external server, I used lightweight client-side models with MediaPipe.

When a user selects an image, the model detects facial landmarks (eye line, crown of the head, chin tip, and center of face) directly on the device.

2. Country-Specific Spec Matching

Once face landmarks are identified, the app calculates whether the head size and eye level match the target country’s criteria:

If the user chooses a US Passport, the canvas crops to a 1:1 ratio and ensures the face occupies 50–69% of the frame.
If they choose a Schengen Visa, it adjusts to a 35:45 ratio with strict vertical alignment.

Users always have manual controls (zoom, pan, rotation, and fine cropping) if they prefer adjusting it themselves.

3. Background & Lighting Prep

Official guidelines require neutral, plain backgrounds (usually pure white, off-white, or light grey depending on the authority). The app provides automated background removal tools alongside contrast and exposure adjustments so photos pass automated consular checks.

4. 300 DPI Print Sheet Export

Consular offices don't accept low-res digital screenshots. Using pdf-lib and high-density canvas rendering, the app creates a standard 4R (4×6 inch) print layout tiled with multiple photo copies at 300 DPI.

Users can save the JPEG or PDF, upload it to any local pharmacy or photo booth app, and print it as a standard 4×6 photo for pocket change.

💡 Key Lessons Learned

Client-side processing builds immediate trust: Users are rightfully cautious about uploading personal ID photos online. Processing photos locally in the browser removed a massive friction point.
Edge cases in facial geometry: Hair volume, tilts, and varying phone lenses make automated cropping tricky. Giving users a split-view before/after comparison with manual fallback sliders proved essential.
Print dimensions are unforgiving: Screen pixels don't equal print inches. Ensuring pixel-perfect 300 DPI coordinate mapping for physical print sheets required strict dimensional calculations.

If you have questions about client-side image processing, canvas scaling, or biometric geometry, feel free to drop a comment below!