NanoLog Redact Go to NanoLog.dev
Home > Guides > Running Tesseract OCR at the Browser Edge via WebAssembly
Edge OCR

Running Tesseract OCR at the Browser Edge via WebAssembly

Optical Character Recognition (OCR) traditionally required spinning up heavy server-side processing pipelines (such as Python's Tesseract wrappers or cloud vision APIs). In the modern web landscape, WebAssembly (Wasm) allows us to run Tesseract directly in the browser. This shift from server-side APIs to edge execution guarantees 100% data privacy—since the image is processed entirely inside the client’s browser memory and never uploaded to any remote server.

How Tesseract.js Works

Tesseract.js compiles the core C++ Tesseract engine into WebAssembly. To prevent blocking the main browser thread (which would freeze the UI during heavy text scanning), Tesseract.js spawns Web Workers. Here is a basic implementation snippet for initializing an OCR worker:

import { createWorker } from 'tesseract.js';

async function runOCR(imageBuffer) {
  // 1. Create a Web Worker
  const worker = await createWorker('eng');
  
  // 2. Perform text recognition
  const { data: { text, words } } = await worker.recognize(imageBuffer);
  
  // 3. Terminate worker to free memory
  await worker.terminate();
  
  return { text, words };
}

Why Edge OCR is Vital for Security

When users upload documents containing Personally Identifiable Information (PII) to cloud OCR APIs, those documents transit over the network and are stored in cloud buckets (often indefinitely). By running Tesseract locally inside the client's sandbox via WebAssembly:

  • Zero Network Transit: Sensitive details (like medical records, financial statements, or passports) never leave the user's physical machine.
  • Zero Ingestion Liability: Companies operating the redaction tool do not ingest, process, or store customer PII, eliminating GDPR and HIPAA compliance liability.
  • Reduced Server Bills: CPU-heavy character classification is offloaded to the user's local hardware.