How to Detect Text in Images

By  on  

Images are a great way to communicate without text but oftentimes images are used/abused to spread text within social media and advertisements. Text in images also presents an accessibility issue. The truth is that it's important, for any number of reasons, to be able to detect text in image files. The amazing open source tool that makes detecting text in images possible is tesseract OCR!

I recommend using Homebrew to install tesseract:

brew install tesseract

To run tesseract to read text from an image, you can run the following from command line:

tesseract ~/Downloads/MyImage.png ~/Downloads/MyImage.txt -l eng

The command above extracts detected text in the English language (-l eng) into a text file (MyImage.txt). The process is very quick and there are dozens of supported languages.

Let's look at the following example:

The following text is detected:

International
‘Champions
Cup

~- TOUR SQUAD

#AFCTour2018

CECH MUSTAFI GUENDOUZI oziL
LENO SOKRATIS NELSON IWOBI
MARTINEZ MAVROPANOS SMITHROWE = NKETIAH
BELLERIN OSEI-TUTU WILLOCK PEREZ
KOLASINAC ELNENY RAMSEY LACAZETTE
CHAMBERS MAITLAND-NILES MKHITARYAN AUBAMEYANG
HOLDING

There are a number of utilities in different programming languages that plug into tesseract's functionality, but it's important to know the underlying tool! tesseract is an unbelievable tool that you should take advantage of if you need an open source utility for detecting text in an image!

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    CSS pointer-events

    The responsibilities taken on by CSS seems to be increasingly blurring with JavaScript. Consider the -webkit-touch-callout CSS property, which prevents iOS's link dialog menu when you tap and hold a clickable element. The pointer-events property is even more JavaScript-like, preventing: click actions from doing...

  • By
    HTML5 Context Menus

    One of the hidden gems within the HTML5 spec is context menus. The HTML5 context menu spec allows developers to create custom context menus for given blocks within simple menu and menuitem elements. The menu information lives right within the page so...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!