Extracting text from images in the browser: how OCR works without a server

Optical character recognition used to mean uploading a scan to a service and waiting. Tesseract, the open-source engine that powers most of those services, now compiles to WebAssembly and runs in a browser tab. The Image to Text tool loads that WASM core, hands it an image, and returns editable text — nothing leaves your machine.

What OCR is actually doing

Tesseract does not "read" a picture the way a person does. It runs a pipeline:

1. Binarisation — converts the image to black and white so text edges are sharp.
2. Layout analysis — finds blocks, columns and lines, then separates them from graphics.
3. Line and word finding — splits each line into candidate words using the gaps between characters.
4. Recognition — for each word, a neural network scores possible character sequences against its language model and picks the most probable one.

Step 4 is why a language file matters. The engine expects English, Hindi, Arabic or whichever trained data you load; without the right file, it will happily produce confident nonsense.

What it reads well, and what it does not

• Crisp screenshots of text — near perfect. This is the easy case, and the one most people actually need.
• Scanned documents at 300 DPI — very good, provided the page is straight and the contrast is high.
• Photographs of signs or menus — usable but fragile. Uneven lighting, perspective and focus all hurt.
• Handwriting — poor. Tesseract is trained on printed text; cursive needs a different model.
• Stylised or decorative fonts — hit and miss. Thin serifs and heavy strokes confuse the line finder.
• Tiny text on a busy background — often lost. The layout analyser treats it as graphics.

Preparing an image before you OCR it

A little cleanup before recognition pays off more than any post-processing:

• Increase resolution. Upscaling a small screenshot 2x with the Image Editor gives the line finder more pixels to work with.
• Boost contrast. Dark text on a light background is the target. A levels or contrast adjustment can rescue a muddy photo.
• Straighten the page. Tesseract tolerates a few degrees of skew, but a deskew pass removes a whole class of errors.
• Crop to the region of interest. If only one panel has text, feed it that panel — the layout analyser then has less to get wrong.

Language selection changes everything

Loading the wrong language file is the single most common cause of bad output. If a document mixes English and a second script, load both; Tesseract will use context from each. For a receipt in Hindi mixed with English brand names, loading eng+hin beats guessing one.

When to reach for PDF instead

If the source is already a PDF, do not screenshot it and OCR the screenshot. A PDF often contains a real text layer you can extract directly with the PDF Text Extractor — lossless, instant and immune to every OCR failure above. Reserve OCR for cases where the text genuinely only exists as pixels.

The practical sequence

1. Crop and clean the image with the Image Editor.
2. Pick the right language file in the OCR tool.
3. Run recognition, then proofread — OCR is a typing aid, not a source of truth.

Treat the output as a draft and the tool as a fast first pass, and browser-side OCR becomes genuinely useful instead of a curiosity.