DEV Community

Arthur031221
Arthur031221

Posted on

A passport photo guide that runs in your browser

I needed a passport photo and the photo counter wanted $17 for one picture. Printing it yourself on a 4 x 6 sheet is a familiar workaround, but you only find out the head is the wrong size when someone refuses the photo.

I built Deadpan to check that while you stand in front of your camera. Each rule turns green as you meet it. When everything holds for a second, it takes the picture and lays out six copies on one 4 x 6 print.

The head size rule turns green as the person leans in, then six copies appear on a 4 x 6 sheet

How it measures

MediaPipe's face landmarker finds 478 points on the face. One is the chin. The pupils give the tilt of the head, and a person segmenter run on a square around the face finds the top of the head. Hair counts because the issuing authorities measure to the top of the head.

Once the crop is known, millimetres per pixel is the photo height divided by the crop height. Every rule is arithmetic on that scale. Each rule says whether its number comes from the authority's page or is my own tolerance for a rule that has no number.

How I checked it

I ran the pipeline on 30 public domain portraits and compared its head height measurement with chin and crown points I marked by hand on a ruler overlay. The pass or fail verdict matched on 29 of 30 photos. All 20 photos it passed are inside the US window of 25 to 35 mm by those points. Ten portraits are cropped too tightly for a 2 inch photo, and Deadpan refuses them instead of padding the picture. The median error is 1.0 mm and the worst is 2.5 mm.

That's one person marking points on formal adult portraits. It says little about children or hats.

Nothing leaves the tab

The models, fonts and WebAssembly runtime are in the repository, so the page calls no CDN. It ships a Content Security Policy that blocks every other origin. An end to end test plays a recorded clip as the camera, takes the picture and builds the sheet while recording every request. Then it tries a fetch to another origin and expects the policy to stop it.

What is rough

There are four presets: US passport, US visa, Taiwan and Schengen. I only added numbers I could read on the authority's page. Canada needs a commercial photographer, so a home print would be refused. Only Chromium is tested, and I haven't tried a real phone camera.

If you know a rule I should add, or a head the measurement gets wrong, the source is on GitHub.

Top comments (2)

Collapse
 
dev_in_the_fog profile image
Jason Y. (dev_in_the_fog) •

Great write-up. The structured step-by-step reasoning made following along very engaging. Keep up the awesome work!

Collapse
 
arthur031221 profile image
Arthur031221 •

thanks, I'm glad the step-by-step format made the measurements and tradeoffs clear. I wanted readers to see how the guide reaches its verdict and where the limits are.