How to Extract Text from Any Image (OCR Guide)
- How to Extract Text from Any Image: A Practical OCR Guide
- What OCR Actually Does
- Practical Scenario 1: Extracting Text from a Screenshot
- Practical Scenario 2: Digitising Printed Documents
- Practical Scenario 3: Processing Receipts
- Practical Scenario 4: Business Cards
- Practical Scenario 5: Whiteboard and Handwritten Notes
- Getting the Best OCR Accuracy: A Systematic Checklist
- Resolution
- Contrast and Lighting
- Straightness and Orientation
- Sharpness
- Language Selection
- File Format
- Privacy: Why Running OCR in the Browser Matters
- Understanding OCR Limitations Honestly
- A Note on Language Support
- Summary: When to Use Browser OCR and What to Expect
How to Extract Text from Any Image: A Practical OCR Guide
You have a screenshot of an error message and cannot copy the text. You have a phone photo of a receipt you need to log in a spreadsheet. You have a scanned contract that needs to be searched. In every one of these situations, Optical Character Recognition (OCR) is the solution โ and with a browser-based tool like the one at sourcecodestack, you can do it for free, privately, and without installing anything.
This guide walks through practical scenarios where OCR saves real time, then gets into the mechanics of how to get the best accuracy from whatever image you are starting with.
What OCR Actually Does
OCR โ Optical Character Recognition โ is the process of looking at the pixels in an image and working out which characters they represent. The result is machine-readable text that you can copy, search, edit, paste into other applications, or feed to another tool.
The key insight is that an image is opaque to software: a computer cannot search the words inside a JPEG the way it can search a text file, cannot count them, translate them, or extract data from them. OCR is the bridge between the visual world (photos, scans, screenshots) and the text world (documents, databases, spreadsheets).
Modern OCR engines like Tesseract use deep-learning neural networks trained on millions of character samples across dozens of languages. When you upload an image, the engine pre-processes it (adjusting contrast, straightening skew, separating text regions from background), then runs the neural network over sequences of character shapes to predict the most likely string of characters. A language model post-processes the result to fix common errors by checking the output against a dictionary.
Practical Scenario 1: Extracting Text from a Screenshot
This is one of the most common everyday uses of OCR, and it is surprisingly underused. Here are situations where it saves significant time:
Error messages in apps that block copy-paste. Some desktop applications, particularly older enterprise software, display error dialogs where text selection is disabled. Instead of transcribing the error code by hand or taking a photo with a second device, you can screenshot the dialog, run it through OCR, and paste the exact error text into a search engine or a ticket.
Code shown in video tutorials. When a developer tutorial shows code on screen without a link to a repository, OCR can extract the code from a screenshot so you do not have to type it out character by character. Accuracy on monospaced code fonts is generally high, though you should still verify the output against the video frame.
Social media posts rendered as images. Quotes, announcements, and articles shared as images on social platforms are inaccessible to copy-paste. OCR makes them text again.
Terms and conditions rendered as non-selectable text. Some web forms and PDF viewers render text as images to prevent easy copying. OCR bypasses that restriction.
For screenshots, accuracy is usually excellent because the image is already at screen resolution, the contrast is typically high (black text on white or dark text on light grey), and the characters are perfectly sharp with no blur.
Practical Scenario 2: Digitising Printed Documents
Scanning a physical document and running OCR on the result is how paper gets turned into a searchable digital archive. This workflow matters in a surprising number of professions:
- Legal and compliance. Printed contracts, signed agreements, and regulatory filings become searchable PDFs after OCR. A lawyer who can search for a clause in seconds rather than flicking through pages saves hours.
- Accounting. Old printed invoices and statements that pre-date modern accounting software can be digitised and imported.
- Healthcare. Printed patient records (in jurisdictions where they still exist) can be digitised for electronic health record systems.
- Research and academia. Archive materials, printed journal articles, and historical documents become citable and searchable once OCR has run over them.
- Real estate. Property deeds, inspection reports, and printed survey documents become shareable and searchable.
For scanned documents, image quality is the dominant factor in accuracy. A clean scan at 300 DPI on a flatbed scanner will give near-perfect output on standard body text. A photo taken hastily under dim light with a phone camera will produce errors. The section on accuracy below goes into this in detail.
Practical Scenario 3: Processing Receipts
Expense management is one of the most friction-filled administrative tasks for anyone who travels or makes work-related purchases. A stack of paper receipts at the end of a business trip represents data that needs to be extracted: vendor name, date, total amount, VAT amount, item descriptions.
OCR can pull all of this into text form from a phone photo of the receipt. The output will not be perfectly structured โ you will still need to identify which number is the total and which is the tax โ but having the raw text eliminates the transcription step entirely.
For best results on receipts:
- Photograph on a flat, dark surface (so the receipt's white paper contrasts with the background).
- Ensure the receipt is flat (not crumpled or folded).
- Use good overhead lighting to avoid shadows from your hand or the phone.
- Photograph straight down, not at an angle.
- Zoom in so the receipt fills most of the frame.
Thermal paper receipts (the shiny kind) sometimes have low contrast because the printing fades. If you encounter a particularly faded receipt, try photographing it against a dark background and increasing the contrast in your phone's photo editor before running OCR.
Practical Scenario 4: Business Cards
A business card is a small, information-dense printed item. After a conference or a client meeting, the manual entry of contact details from a stack of cards is tedious and error-prone. OCR converts a card photo to text in seconds, giving you the name, company, title, phone number, email, and website as copyable text.
Business cards often use design-heavy fonts, small type, and coloured backgrounds, which can reduce OCR accuracy compared to plain documents. For best results:
- Photograph against a contrasting background (a white card on a dark surface, a dark card on a light surface).
- Fill the frame with the card.
- Use the flash or ensure good lighting โ business card stock is often shiny and can produce glare.
For particularly ornate cards where OCR accuracy is low, OCR at least saves you from retyping the email address and phone number (which have zero tolerance for errors), even if the name or company needs manual cleanup.
Practical Scenario 5: Whiteboard and Handwritten Notes
This scenario requires the most realistic expectation-setting. Standard OCR engines are optimised for printed and typed text, not handwriting. Results on handwriting vary enormously based on how neat and regular the writing is:
- Clearly printed block capitals with good spacing will often come through accurately, especially if the contrast is high (dark marker on a white whiteboard, for example).
- Mixed print and cursive will produce partial results โ some words accurate, others garbled.
- Flowing cursive handwriting is generally a poor match for standard OCR and dedicated handwriting recognition (ICR) tools are a better fit.
For whiteboard photos, the main challenge is usually uneven lighting and perspective distortion. If you photograph a whiteboard from an angle, the text will be visibly distorted. Use your phone's document scanning mode if it has one โ it can perform perspective correction automatically. Photograph from directly in front of the whiteboard with good, even lighting, and ensure the marker contrast is sufficient (fresh dark markers on a clean white board work best).
Getting the Best OCR Accuracy: A Systematic Checklist
The difference between a 99% accurate OCR result and a 70% accurate one usually comes down to image quality. Work through this checklist before uploading:
Resolution
Resolution is the most impactful single factor. An image where each character is rendered at only a few pixels tall does not contain enough information for any engine to reliably identify the character shape.
- For scanned documents, use 300 DPI as a minimum. 300 DPI on an A4 page produces an image approximately 2480 ร 3508 pixels, which is more than enough for standard body text.
- For phone camera photos, hold the phone close enough that the text region fills most of the frame. A 12-megapixel camera shooting from 20 cm above an A4 page easily exceeds the resolution needed.
- If you are capturing a high-resolution screen (4K or Retina display), screenshots will naturally be high resolution and should cause no issues.
Contrast and Lighting
OCR engines binarise the image early in their pipeline, converting every pixel to either black or white based on a brightness threshold. If the contrast between the text and background is insufficient, characters will either disappear into the background or the background will bleed into the characters.
- Dark text on a white or light background: ideal.
- Coloured text on a similarly coloured background: very problematic.
- Text in shadow or under uneven lighting: improve with flash or a well-lit environment.
- If the original document has low contrast (faded ink, old thermal paper), use your image editor to increase contrast and brightness before uploading.
Straightness and Orientation
Text must be approximately horizontal for the line segmentation step to work correctly. The engine can handle a few degrees of skew, but significantly tilted or sideways text will produce garbage output.
- Lay documents flat and photograph from directly above.
- Use the straighten or crop tool in your phone's photo editor to correct tilt before uploading.
- Ensure pages are not curled at the edges (a problem with book pages shot without a flatbed scanner).
Sharpness
Blur destroys the fine detail that distinguishes similar characters. Motion blur from a shaky hand, out-of-focus blur from poor autofocus, and JPEG compression artifacts are all common sources of reduced sharpness.
- Brace your hands or use a surface to stabilise the phone when photographing documents.
- Tap to focus directly on the text before capturing.
- Save in PNG if possible, or use a high quality JPEG setting (minimal compression).
Language Selection
The language selection in the tool primes the Tesseract post-processing dictionary and character set for a specific language. Choosing the wrong language will cause accented characters, language-specific punctuation, and common words to be mis-recognised.
- Always match the language selection to the language of the text in the image.
- For documents with text in two languages, try running OCR twice, once for each language, and compare the results.
File Format
- PNG: lossless, ideal for screenshots and computer-generated graphics.
- JPEG: lossy, but fine at high quality settings. Avoid heavily compressed JPEGs (small file sizes) for OCR.
- WEBP: both lossless and lossy variants are supported. Use lossless WEBP or high-quality lossy WEBP.
Privacy: Why Running OCR in the Browser Matters
When you process a document through a cloud OCR service, your image travels to a third-party server. The server processes it and returns the text. Even if the service has a privacy policy stating they do not retain images, the image still physically transits their infrastructure.
For documents containing personal data โ identity documents, medical records, bank statements, salary information, legal correspondence โ this represents a real privacy risk. Data in transit can be intercepted. Servers can be breached. Policies can change.
Browser-based OCR using Tesseract.js eliminates this risk entirely. The recognition engine is a WebAssembly binary that runs on your own device. Your image never leaves your browser. You can verify this by opening the network inspector in your browser's developer tools and confirming that no image data is transmitted during the recognition process โ only the initial engine download and language data files are fetched from the server, and those contain no information about your documents.
This makes browser OCR particularly suitable for:
- HR teams handling employment contracts or payroll data.
- Healthcare workers digitising patient documents.
- Legal professionals working with privileged communications.
- Anyone processing personal identification documents.
- Anyone who prefers not to hand their data to a third party without necessity.
Understanding OCR Limitations Honestly
OCR is excellent at what it is designed for โ printed text in good conditions โ but it has real limitations that no tool can fully overcome:
Handwriting. The character shapes in handwriting are highly variable between writers and even within the same writer's text. Standard Tesseract OCR will produce poor results on most handwriting. Printed block letters are an exception and will often come through well.
Decorative and script fonts. Fonts designed for visual appeal rather than legibility can fool the recognition engine. A cursive script font, a heavily stylised display font, or a logo's lettering may be misread or produce no output at all.
Very small text. Even at high resolution, text smaller than about 10 points in the original document can be at the resolution limit of OCR accuracy. Footnotes, fine print, and captions may need to be zoomed in on separately.
Tables and complex layouts. OCR extracts text but does not always preserve the structure. A table with columns will often come out as a single stream of text rather than tab-separated or comma-separated values. For structured data extraction from tables, you may need to manually re-format after OCR.
Similar characters. The pairs 0/O, 1/l/I, 5/S, and rn/m are the most common sources of single-character substitution errors. In numeric fields these errors matter โ always verify numbers in extracted text against the original image.
A Note on Language Support
The sourcecodestack Image to Text tool currently supports English, Spanish, French, German, Italian, and Portuguese โ the six most widely spoken European languages. Each language uses a separate Tesseract language data file downloaded and cached on first use for that language. Switching languages is as simple as choosing from the dropdown before uploading.
For other languages, the underlying Tesseract engine supports over 100 languages including Arabic, Chinese (Simplified and Traditional), Japanese, Korean, Hindi, Russian, and many more. If you need a language not currently in the tool, note that the Tesseract project itself supports it โ the limitation is in which language packs are bundled in the browser tool.
Summary: When to Use Browser OCR and What to Expect
Browser OCR is the right choice for everyday text extraction tasks where the image quality is reasonable and privacy matters. It costs nothing, requires no account, works offline after the first load, and produces results that match or exceed cloud services on clean printed images.
Set your expectations appropriately: near-perfect on high-resolution, high-contrast, well-oriented printed text; less reliable on handwriting, decorative fonts, and degraded images. Invest two minutes in image quality before uploading โ good lighting, stable camera, correct orientation โ and you will get consistently accurate output.
The tool is available at sourcecodestack under Image Tools. No sign-up, no limits, nothing uploaded.
You might also like
Remove Image Backgrounds Free: Clean Edges Every Time
Remove Image Backgrounds Free: Clean Edges Every Time If you sell products online, create social medโฆ
Read moreCan't Open iPhone Photos? Fix HEIC on Any Device
Can't Open iPhone Photos? A Complete Guide to HEIC Troubleshooting on Windows, Android, and the Web โฆ
Read moreImage Converter Guide: Best Formats & When to Use Them
Image Converter Guide: Best Formats and When to Use Each One Choosing the wrong image format is one โฆ
Read more