How I Built an AI-Assisted Passport Photo Studio in the Browser

A developer built PassportPhotoBox, a browser-based passport and visa photo tool that runs face-landmark detection entirely on the user's device using MediaPipe's @mediapipe/tasks-vision, avoiding uploads of personal facial images to remote servers. The app aligns and crops photos to country-specific biometric head-size and eye-level rules on an HTML5 canvas, applies background and contrast cleanup, and uses pdf-lib to generate 300 DPI 4×6-inch print-ready sheets users can take to a local pharmacy.

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 https://passportphotobox.com an in-browser passport and visa photo maker and the technical choices behind it. Different countries have wildly different biometric photo standards: 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: I chose a modern, performance-focused stack: @mediapipe/tasks-vision client-side face landmark detection pdf-lib for generating exact 300 DPI print-ready sheets 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 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. Once face landmarks are identified, the app calculates whether the head size and eye level match the target country’s criteria: Users always have manual controls zoom, pan, rotation, and fine cropping if they prefer adjusting it themselves. 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. 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. If you have questions about client-side image processing, canvas scaling, or biometric geometry, feel free to drop a comment below