OCR Text Recognition
Extract text from images in 10+ languages using Tesseract.js.
OCR Text Recognition extracts text from images in 10+ languages using Tesseract.js — the card description says exactly that. Drop one image (a file-size badge appears on the preview), choose "Language" from English, Spanish, French, German, Italian, Portuguese, Chinese (Simplified), Japanese, Korean, and Arabic, then click "Extract Text". Live statuses walk you through "Loading OCR engine...", "Downloading {lang} language data (cached on repeat visits)...", and "Recognizing text...".
The result shows "Words", "Lines", and "Confidence" ({n}%) stats above an "Extracted Text:" textarea, with "Copy Text" and "Start Over". Important disclosure: the **image itself never leaves the browser** — recognition runs locally — but on first use per language, tesseract.js downloads its WASM core and the language's .traineddata file from the jsDelivr CDN, then caches them for repeat visits (as the field description promises: "First-time language download may take a moment. Cached after that.").
How it works
lib/imageOcr.ts creates a tesseract.js worker via createWorker(lang, undefined, { logger }) where the logger maps statuses to progress (recognizing text → 50–95%, loading language traineddata → 10–30%). The worker is cached per language (cachedWorker/cachedLang); changing language terminates and recreates it. worker.recognize(objectURL) returns text, confidence (rounded), and words/lines counts from Tesseract's data (whitespace/newline splits as fallback).
NETWORK DISCLOSURE — tesseract.js defaults when langPath/corePath are unset (the app passes no overrides): the worker script loads from cdn.jsdelivr.net/npm/tesseract.js@v…/dist/worker.min.js, the core from cdn.jsdelivr.net/npm/tesseract.js-core@v…, and traineddata from cdn.jsdelivr.net/npm/@tesseract.js-data/{lang}/4.0.0…/{lang}.traineddata.gz — all from the jsDelivr CDN, cached after first download. The image is processed locally in the worker; only engine assets cross the network.
How to use
- Drop one image (accept image/*; file-size badge appears on the preview).
- Choose "Language" (default English/eng) — description: "First-time language download may take a moment. Cached after that."
- Click "Extract Text" (button shows live status while running).
- Watch status: "Loading OCR engine..." → "Downloading {lang} language data..." (first time per language) → "Recognizing text...".
- Read the "Words", "Lines", and "Confidence" ({n}%) stats.
- Review the recognized output in the "Extracted Text:" textarea.
- Click "Copy Text" (toast "Text copied to clipboard!") or "Start Over".
Tips
- First run per language downloads traineddata from jsDelivr — the description promises it's "Cached after that."
- Worker reuse: the same language skips respawn; switching languages terminates the cached worker and rebuilds it.
- Confidence below ~60% usually means low contrast or skew — preprocess with image-filters or crop tightly first.
- The UI offers 10 languages — the "10+" in the tagline matches OCR_LANGUAGES' length.
OCR Text Recognition FAQ
Does OCR need the internet?
Yes for first-time engine assets — tesseract.js fetches the WASM worker/core and .traineddata from the jsDelivr CDN; repeats hit cache. The image itself never leaves the browser.
Which languages can I pick?
English (eng), Spanish (spa), French (fra), German (deu), Italian (ita), Portuguese (por), Chinese Simplified (chi_sim), Japanese (jpn), Korean (kor), Arabic (ara).
Why does it say "Downloading … language data"?
createWorker is fetching {lang}.traineddata from the CDN — per the field description, it's cached on repeat visits.
What do Words, Lines, and Confidence mean?
Counts from Tesseract's recognition data (whitespace/newline split fallback if absent) and the rounded confidence percentage.
Can I run two languages at once?
No — single language per run; changing language terminates the cached worker and recreates it for the new language.
Credits
- Tesseract.js — WASM OCR engine; worker/core/traineddata fetched from jsDelivr CDN and cached