Building an Image to Text OCR Application in Node.js Using Express and Tesseract

Optical Character Recognition (OCR) is a powerful technology that extracts text from images, making it a vital tool for a wide range of applications, from automated data entry to image processing. In this post, we will build a simple Node.js application using Express and Tesseract to perform OCR on images fetched from URLs.

Prerequisites

Before starting, ensure you have Node.js and npm installed on your system. You can download them from Node.js official website.

Step 1: Setting Up the Project

First, create a new directory for your project and initialize it:

mkdir ocr-node-app
cd ocr-node-app
npm init -y

Next, install the required packages:

npm install express axios node-tesseract-ocr

• Express: A minimal and flexible Node.js web application framework.
• Axios: A promise-based HTTP client for the browser and Node.js, used here for fetching the image.
• node-tesseract-ocr: A powerful OCR engine for extracting text from images.

Step 2: Writing the Application Code

Create a new file named index.js and add the following code:

const express = require('express');
const tesseract = require('node-tesseract-ocr');

const app = express();
const PORT = 3000;

// Tesseract configuration
const config = {
  lang: 'eng',  // Language of OCR
  oem: 1,       // OCR Engine mode
  psm: 3        // Page segmentation mode
};

// Route to fetch and convert the image
app.get('/', async (req, res) => {
  const imageUrl = req.query.imageurl;
  console.log(imageUrl);

  try {
    // Use Tesseract to recognize text from the image
    tesseract
      .recognize(imageUrl, config)
      .then((text) => {
        console.log('OCR Result:', text);
        res.send(text);
      })
      .catch((error) => {
        console.error('OCR Error:', error.message);
        res.status(500).send('Error processing the image.');
      });
  } catch (error) {
    console.error('Error:', error.message);
    res.status(500).send('An error occurred while processing the image.');
  }
});

// Start the server
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Code Explanation:

1. Express is used to create a simple server that listens for requests.
2. Tesseract processes the image and extracts text based on the specified configuration (config object).
3. When a request is made to the root route (/), the server fetches the imageurl from the query parameters and passes it to Tesseract for text extraction.
4. The extracted text is then sent back as the response.

Step 3: Running the Application

Run the application using:

node index.js

Open your browser and navigate to http://localhost:3000/?imageurl=<IMAGE_URL>, replacing <IMAGE_URL> with the actual URL of an image you want to extract text from.

Example:

To test the OCR, you can use an image URL like:

http://localhost:3000/?imageurl=https://example.com/sample-image.png

The server will extract the text from the image and display it in the browser.

Handling Errors

The code includes error handling to catch common issues, such as invalid image URLs or failures in the OCR process. You can customize the error messages or log more details depending on your application’s needs.

Conclusion

This simple Node.js application demonstrates how to use Tesseract OCR to extract text from images using a few lines of code. With Express handling the server setup and Tesseract taking care of OCR, you can quickly integrate image-to-text capabilities into your projects.

Feel free to expand on this base by adding file uploads, caching, or language support for other scripts and characters. The possibilities are endless!