Anthony Smith
Tony's Tech Blog

Tony's Tech Blog

How to convert images to text with JavaScript using Tesseract.js

How to convert images to text with JavaScript using Tesseract.js

Use Tesseract.js to pull text from images on any platform that supports JavaScript

Anthony Smith's photo
Anthony Smith
·Jul 14, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • Step 1: Include Tesseract.js
  • Step 2: Set up our HTML
  • Step 3: Initialize our project and run Tesseract.js
  • Step 4: Handle the result

When we think about Optical Character Recognition otherwise known as (OCR) I'm sure a lot of crazy things come to mind. Most of us probably don't even really know what that means actually.

Basically, Optical Character Recognition (OCR) is the process that converts an image of text into a machine-readable text format. For example, if you scan a form or a receipt, your computer saves the scan as an image file. Then, you can use the image file as input to a computer program that reads the image and converts it into text.

tesseract.gif

Today, we're going to use the Tesseract.js library to convert an image of text into a machine-readable text format.

Let's get started!

Step 1: Include Tesseract.js

The first step is to include Tesseract.js in our new project. Go ahead and fire up VSCode or your favorite IDE.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tesseract.js</title>
    <script src='https://unpkg.com/tesseract.js@v2.0.0-alpha.13/dist/tesseract.min.js'></script>
  </head>
</head>
<body>

</body>
</html>

If you prefer to use NPM, you can use the following command to install Tesseract.js:

npm install tesseract.js

Great, now that we have that installed, we need to add our main javascript file to our project at the end of our <body>.

<body>
    <script src="js/tesseract-ocr.js"></script>
</body>
</html>

Step 2: Set up our HTML

Now we need to set up our HTML and add the following elements below:

  • Language Selector
  • Image file selector
  • Thumbnail preview of image selected
  • Placeholder for OCR text
    <select id="langsel">
    <option value='eng' selected> English </option>
    </select>
    <input type="file" id="file-1" class="inputfile" />
    <img id="selected-image"  src="" />
    <div id="log">
      <span id="startPre">  
          <a id="startLink" href="#">Click here to recognize text</a> or choose your own image
      </span>
    </div>
    

Step 3: Initialize our project and run Tesseract.js

So, now we need to initialize our project and run Tesseract.js. We're going to use the TesseractWorker to achieve this. Following that, we will utilize the recognize function to convert our image into text. This function will run asynchronously, so we need to use the .then function to handle the result. After that, we will add a callback using the progress method to monitor the status and progress of the OCR operation.

const worker = new Tesseract.TesseractWorker();
worker.recognize(file, $("#langsel").val())
.progress(function(packet){
    console.info(packet)
    progressUpdate(packet)
})
.then(function(data){
    console.log(data)
    progressUpdate({ status: 'done', data: data })
})

Step 4: Handle the result

Now we can finally explore the TesseractJob object that is going to be returned and use it to display the results.

Once the result is returned it will contain a confidence level which is the text that was extracted from the image. We can now use progressUpdate to display the result.

function progressUpdate(packet){
    var log = document.getElementById('log');

    if(log.firstChild &amp;&amp; log.firstChild.status === packet.status){
        if('progress' in packet){
            var progress = log.firstChild.querySelector('progress')
            progress.value = packet.progress
        }
    }else{
        var line = document.createElement('div');
        line.status = packet.status;
        var status = document.createElement('div')
        status.className = 'status'
        status.appendChild(document.createTextNode(packet.status))
        line.appendChild(status)

        if('progress' in packet){
            var progress = document.createElement('progress')
            progress.value = packet.progress
            progress.max = 1
            line.appendChild(progress)
        }


        if(packet.status == 'done'){
            log.innerHTML = ''
            var pre = document.createElement('pre')
            pre.appendChild(document.createTextNode(packet.data.text.replace(/\n\s*\n/g, '\n')))
            line.innerHTML = ''
            line.appendChild(pre)
            $(".fas").removeClass('fa-spinner fa-spin')
            $(".fas").addClass('fa-check')
        }

        log.insertBefore(line, log.firstChild)
    }
}

And that's it! We're now ready to use Tesseract.js to convert an image into text. Choose a custom image and watch the magic unfold.

tesseract.gif


If you enjoyed this article please give it a like. I will be adding more content in the coming weeks so be sure to subscribe to my newsletter so that you don't miss anything! Thanks for stopping by!

Did you find this article valuable?

Support Anthony Smith by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this