How to Extract Text From an Image in JavaScript

Last updated July 2026.

To extract text from an image in JavaScript, you have two routes. For free, offline text you run tesseract.js, a WebAssembly port of the Tesseract engine that works in the browser and in Node.js and returns a block of recognized text. When you need named fields (an invoice total, a date) or tables instead of a raw string, you call an OCR API such as DocuOCR: POST the image with fetch and read back structured JSON. tesseract.js is the right tool for simple, low-volume text; an OCR API is the right tool when accuracy, scale or labeled data matter.

Reading text off an image sounds like one job, but the right approach depends entirely on what you need back and how many images you have. A one-off screenshot on a personal project is a very different problem from thousands of scanned receipts flowing through a Node service every day. Below is how to do each in JavaScript, with code, and how to know which one you are actually solving.

How do I extract text from an image in JavaScript?

The most direct way with no server and no API key is tesseract.js. It bundles the Tesseract OCR engine compiled to WebAssembly, so it runs entirely in JavaScript, in the browser or in Node. You install it, point it at an image, and it returns the recognized text:

import Tesseract from "tesseract.js";

const { data } = await Tesseract.recognize("receipt.png", "eng");
console.log(data.text);

That is the whole path for plain text. The recognize call downloads the language data on first run, processes the image, and gives you data.text plus word and line boxes if you want position. For a clean, high-contrast image with ordinary fonts, this works well and costs nothing. The catch is everything the word "clean" is hiding.

Why does tesseract.js return the wrong text?

The usual causes are image quality and layout. Tesseract was built to read clear printed text, so faint scans, photos taken at an angle, low resolution, unusual fonts and busy backgrounds all push its accuracy down, sometimes sharply. It also reads the page as a flow of lines, so a receipt or an invoice with columns and a table can come back with the numbers jumbled out of their original structure. Preprocessing helps: convert to grayscale, increase contrast, deskew, and upscale small images before you call recognize. But there is a ceiling. If your images are messy real-world documents rather than crisp scans, you will spend real time tuning and still miss values, which is the point where a hosted OCR API earns its per-page fee by handling that variance for you.

How do I OCR an image in the browser?

tesseract.js runs client-side, so you can OCR an image the user selected without ever uploading it. Take the File from an input or a drop event and hand it straight to recognize:

const file = event.target.files[0];
const { data } = await Tesseract.recognize(file, "eng");
document.querySelector("#out").textContent = data.text;

This is genuinely handy for privacy-sensitive or quick-and-simple cases, since the image stays on the device. Be aware of the cost: the WASM engine and the language files are several megabytes to download, and recognition runs on the user's CPU, so large images or slow phones feel sluggish. For a heavier or higher-accuracy job, you send the image to your server and call an OCR API from there, which keeps your key secret and moves the work off the user's machine.

tesseract.js vs an OCR API

Match the tool to the document and to what you want back. The split is less about JavaScript and more about output and volume:

A useful rule: if you find yourself writing regular expressions over the tesseract.js text to fish out a date or a total, you have outgrown raw OCR and want a document extraction API that returns those values already labeled. For a full breakdown of what each provider charges, see the OCR API pricing comparison.

How do I get structured fields instead of raw text?

Raw text is a starting point, not the goal, for most business images. What a workflow actually needs is the invoice number, the total, the line items, each as a labeled value your code can trust. tesseract.js hands back a string and leaves the parsing to you, which breaks the moment a vendor changes their layout. An OCR API returns the fields directly. With DocuOCR you POST the image, start extraction, and read JSON with named fields and a confidence score on each, so you can route anything below a threshold to a human. The full Node integration is three fetch calls, walked through in the OCR API JavaScript guide. The documents where this pays off are exactly the everyday ones: invoices, receipts and forms. If the images you process are receipts, you can pull the fields off each receipt as structured data instead of a text blob.

How do I extract text from images at scale in Node.js?

At volume, the two routes diverge hard. tesseract.js runs on your own CPU, so a batch of thousands of images blocks a Node process for a long time unless you fan the work out across worker threads, and even then you are bound by the hardware you rented. An OCR API moves that compute off your box: you POST each image, then either poll or register a webhook, and the service scales the recognition. Either way, push the work through a concurrency-limited queue rather than a tight loop, add exponential backoff on HTTP 429 responses, and collect results as they finish. That keeps a large batch moving without hammering the CPU or the rate limit. The document OCR API handles the async side, so your Node code stays a simple submit-and-collect loop.

The short version

Extracting text from an image in JavaScript comes down to what you need back and how much of it. For simple, low-volume plain text, tesseract.js runs in the browser or Node for free, as long as your images are reasonably clean and you preprocess the rest. For named fields and tables, higher accuracy on real-world scans, or serious volume, an OCR API is less code and cleaner output: call it from JavaScript with a few fetch calls and read structured JSON back, with no engine to bundle and no CPU cost on the user's device.