To solve this, I created PassportPhotoBox (https://passportphotobox.com), an online tool that helps users prepare, check, and export passport and visa photos directly from their browser.

Here is an overview of why I built it, how the architecture works, and the technical decisions behind it.

The Problem with Existing Solutions

Different governments enforce strict and varying biometric photo guidelines:

• United States and India: 2 by 2 inches (51 by 51 mm), with the head occupying 50 to 69 percent of total image height.

• United Kingdom and Schengen Area: 35 by 45 mm, with the face height strictly measured between 32 and 36 mm.

• Canada: 50 by 70 mm, with precise chin-to-crown proportions.

Most existing online photo makers have major drawbacks. Some require recurring subscriptions for a one-time task. Others spam the screen with ads. Most critically, many tools upload raw selfies to remote servers for processing, which introduces serious privacy concerns for personal identity documents.

I designed PassportPhotoBox around three core principles:

1. Support official standards for more than 100 countries.

2. Maintain strict user privacy by processing images directly in the browser.

3. Provide print-ready 300 DPI templates so users can print multiple photos at standard kiosks for pocket change.

The Technical Stack

The platform is built with a modern, lightweight web stack:

• Framework: Next.js (App Router), React 19, and TypeScript

• Styling: Tailwind CSS and Radix UI primitives

• Computer Vision: MediaPipe Vision Tasks for client-side face landmark detection

• Canvas Processing: Native HTML5 Canvas API

• Document Generation: pdf-lib for exact 300 DPI print-ready layouts

• Backend and Auth: Supabase (PostgreSQL, Auth, and Edge Functions)

System Pipeline and Workflow

The photo preparation pipeline consists of four main stages:

1. Client-Side Landmark Detection

Instead of sending image files across the network, the browser loads a lightweight MediaPipe model. When an image is selected, the model detects essential facial landmarks on the local device, including the top of the head, eye line, nose bridge, and chin boundary.

2. Geometric Dimension Matching

Once the face geometry is calculated, the system evaluates the selected country preset. If a user needs a US passport, the canvas enforces a square 1:1 aspect ratio with head boundaries within the required percentage. If they select a Schengen visa, it shifts to a 35:45 ratio. Manual controls remain available for users who want to fine-tune cropping, rotation, or alignment.

3. Background and Lighting Adjustment

Official guidelines require neutral, uniform backgrounds. The app provides automated background removal tools alongside brightness, exposure, and contrast controls so users can meet official document standards.

4. 300 DPI Multi-Photo Print Sheets

Consular offices require physical prints with sharp resolution. Using pdf-lib and high-density canvas rendering, the application generates a standard 4R (4 by 6 inch) layout containing multiple copies at exactly 300 DPI. Users can download this file, upload it to any local pharmacy or print kiosk, and print multiple passport photos as a regular photograph for under 50 cents.

Key Takeaways

Processing files locally in the browser immediately reassures users who care about the privacy of their biometric photos. Balancing automated cropping with manual control sliders proved vital, since variations in camera angles and hair volume require human verification. Finally, translating physical millimeter dimensions into high-resolution digital print files required strict unit conversion and canvas scaling.

The project is live at https://passportphotobox.com. If you are working on client-side vision models or document generation in the browser, feel free to share your thoughts in the comments.