Unlocking Text from Images: A Guide using React and Node.js

Introduction

In our digital age, images are omnipresent. From scanned documents to social media photos, visual data is everywhere. But what if we could unlock the hidden textual information within these images? This article delves into how we can leverage React and Node.js to perform text extraction from images.

Why Text Extraction?

1. Text extraction from images has numerous applications:

2. Digitizing printed documents for archiving.

3. Extracting information from receipts or invoices.

4. Enhancing accessibility by converting text in images to readable formats.

Setting Up the Environment

First, let's set up our project environment. Ensure you have Node.js and npm installed (Stick to latest versions if possible).

Step 1: Initialize the Project
mkdir text-extraction-app
cd text-extraction-app
npm init -y

Step 2: Set Up the Frontend with React
Create a React application using Vite (I prefer Vite choose what you are comfortable with).
npm create vite@latest frontend -- --template react
cd frontend
npm install


Step 3: Set Up the Backend with Node.js
Inside your project directory, create a server folder for the backend.
Install the necessary packages, multer and tesseract are the must packages to be installed.

mkdir server
cd server
npm init -y
npm install express multer tesseract.js

You can use the below basic sample code and tailor it the way you need as per your requirement.

const express = require('express');
const multer = require('multer');
const Tesseract = require('tesseract.js');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.use(express.static(path.join(__dirname, 'uploads')));

app.post('/upload', upload.single('image'), (req, res) => {
    const imagePath = req.file.path;
      Tesseract.recognize(imagePath, "eng", {})
    .then((data) => {
      const extractedText = data.data.text.replace(/(icon|image)/gi, "");
      //.replace(/[^\w\s]/gi, '').toLowerCase()
      res.json({ extractedText });
    })
    .catch((error) => {
      console.error(error);
      res.status(500).json({ error: "Failed to extract text" });
    });
});

app.listen(5000, () => console.log('Server started on http://localhost:5000'));

Building the Frontend

1. Setting Up Image Upload In your React app, create a file App.js in the src folder.

import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
    const [image, setImage] = useState(null);
    const [text, setText] = useState('');

    const handleImageChange = (e) => {
        setImage(e.target.files[0]);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('image', image);

        try {
            const response = await axios.post('http://localhost:5000/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            });
            setText(response.data.extractedText);
        } catch (error) {
            console.error('Error uploading image:', error);
        }
    };

    return (
        <div>
            <h1>Text Extraction from Image</h1>
            <form onSubmit={handleSubmit}>
                <input type="file" onChange={handleImageChange} accept="image/*" />
                <button type="submit">Extract Text</button>
            </form>
            <p>Extracted Text: {text}</p>
        </div>
    );
};
export default App;

Conclusion

Congratulations! You've successfully built a text extraction app using React and Node.js. This basic implementation can be further extended to support multiple languages, different image formats, and improved accuracy. Text extraction opens up numerous possibilities for automating data entry, enhancing accessibility, and digitizing information.

Happy learning 🌟. Cheers to new discoveries and continuous growth! 📚🚀