Tutorials6 min read

Turn a Phone Photo Into a Clean Scanned PDF — No App Required

How a browser document scanner deskews a tilted page, thresholds it to crisp black-and-white, and exports a real PDF — all client-side, with the math behind each step.

You photographed a receipt or a contract, and it looks like exactly what it is: a slightly tilted photo with uneven lighting and a grey cast. A document scanner turns that into something that looks like it came off a flatbed. The whole transformation can happen in your browser, and the output can be a genuine PDF.

Step 1: Deskew (straighten the page)

A page photographed by hand is almost never perfectly square to the frame. The fix is to estimate the dominant tilt and counter-rotate.

Text and page edges create strong, mostly-horizontal and mostly-vertical gradients. By measuring the orientation of those edges across the image and folding them to the nearest axis, you get a histogram whose peak is the page's tilt angle. Rotate by the negative of that angle and the lines snap level. Because documents rarely tilt more than a few degrees, a small-angle rotation with a white fill is all you need — no full perspective warp required for the common case.

Step 2: Threshold (make it crisp black-and-white)

A photo of white paper is not actually white — it is a thousand shades of off-grey. To get a clean scan you binarise: every pixel becomes either ink or paper.

The classic, parameter-free way to choose the cut-off is Otsu's method. It builds a histogram of brightness and finds the threshold that best separates the pixels into two groups (dark ink vs. light paper) by maximising the variance between the groups. The result adapts to each photo's lighting automatically. Prefer a softer look? Skip hard binarisation and instead boost contrast around that same threshold — text stays legible, subtle tones survive.

Step 3: Export a real PDF

A "scan" that downloads as a JPEG is only half the job — people expect documents as PDFs. You do not need a heavy PDF library to make one. A single-page PDF is a tiny, well-defined structure: a catalog, a page, an image XObject, and a content stream. Embed the page's JPEG bytes directly using the /DCTDecode filter (no re-compression), set the page size to the image dimensions, and you have a valid one-page PDF assembled in a few kilobytes of code.

Why client-side matters here

Documents are exactly the kind of thing you should not upload to a random web tool — they are receipts, IDs, contracts, medical forms. Running deskew, threshold, and PDF assembly entirely in the browser means the page never touches a server. You get the convenience of an online tool with the privacy of an offline one.

A good workflow: photograph the page flat with even light, run the scanner to deskew and threshold, then export the PDF. For multi-page documents, scan each page and combine them in your PDF viewer — or keep them as individual files for OCR.