Implement OCR with React#1

What is OCR?

According to Wikipedia, Optical character recognition or optical character reader is the electronic or mechanical conversion of images of typed, handwritten or printed text into machine-encoded text, whether from a scanned document, a photo of a document, a scene-photo or from subtitle text superimposed on an image. You can read the full article Here.

Today we are going to Implement Optical Character Recogniton using React and Tesseract.js.

This article is divided in two parts. This is the part 1 , for the Part2 click here

Requirements

• Nodejs version 8.10 or Higher.

Installation

Using create-react-app we are going to generate a new react project.

npx create-react-app react-ocr
cd react-ocr
npm start

For the user interface, we are going to use Bootstrap and to add upload we are going to use React Dropzone Uploader.

npm install --save bootstrap react-dropzone-uploader

and add import styles it in src/index.js file

import 'bootstrap/dist/css/bootstrap.css';
import 'react-dropzone-uploader/dist/styles.css';

We are going now in src/App.js to, import Dropzone component at the top

import Dropzone from 'react-dropzone-uploader';

and replace App class like this to have some basic user interface:

function App ()  {
  render() {
    return (
     <React.Fragment>

      <nav className = "navbar navbar-light bg-light justify-content-center mt-3">
            <a className = "navbar-brand" href = "/" > React OCR </a><br/>
            <p> Optical Character Recognition with React and Tesseract.js </p> 
        </nav>
        <Dropzone 
        accept = "image/jpeg, image/png, image/jpg"
        inputContent = {
            (files,extra) => (extra.reject ? 'Only PNG and JPG Image files are allowed' : 'Drop  image here')
        }
        styles = {
            {
                dropzoneActive: {
                    borderColor: 'green'
                },
                dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
                    inputLabel: (files, extra) => (extra.reject ? { color: 'red' } : {}),
            }
        }
        />
</React.Fragment>
    )
  }
};

It looks like this.

We are going now to integrate upload functionnality using react-dropzone-uploader package that we install before by adding using getUploadParams, onChangeStatus, maxFiles, multiple,canCancel properties.
For storage, we are going to use HttpBin

After adding it our function looks like this:

import React from 'react';
import './App.css';
import Dropzone from 'react-dropzone-uploader';


function App () {

 const getUploadParams = () => {
    return {
        url: 'https://httpbin.org/post'
    }
}

 const handleChangeStatus = ({
    meta
}, status) => {
    if (status === 'headers_received') {
      alert("Uploaded")
    } else if (status === 'aborted') {
      alert("Something went wrong")
    }
}


    return (
      <React.Fragment >

        <nav className = "navbar navbar-light bg-light justify-content-center mt-3">
            <a className = "navbar-brand" href = "/" > React OCR </a><br/>
            <p> Optical Character Recognition with React and Tesseract.js </p> 
        </nav>


        <Dropzone 
        getUploadParams = {
         getUploadParams
      }
      onChangeStatus = {
          handleChangeStatus
      }
      maxFiles = {
          1
      }
      multiple = {
          false
      }
      canCancel = {
          false
      }
       accept = "image/jpeg, image/png, image/jpg"
        inputContent = {
            (files,extra) => (extra.reject ? 'Only PNG and JPG Image files are allowed' : 'Drop  image here')
        }
        styles = {
            {
                dropzoneActive: {
                    borderColor: 'green'
                },
                dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
                    inputLabel: (files, extra) => (extra.reject ? { color: 'red' } : {}),
            }
        }
        /> 

</React.Fragment>
    )
};

export default App;

Now we have successfully add upload functionnality.

This article is divided into two parts. This is the part 1 , for the Part2 click here