loading...
Cover image for Implement OCR with React#1

Implement OCR with React#1

honorezemagho profile image honorezemagho Updated on ・3 min read

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

import 'bootstrap/dist/css/bootstrap.css';
import 'react-dropzone-uploader/dist/styles.css';
Enter fullscreen mode Exit fullscreen mode

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

import Dropzone from 'react-dropzone-uploader';
Enter fullscreen mode Exit fullscreen mode

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>
    )
  }
};


Enter fullscreen mode Exit fullscreen mode

It looks like this.
basic-ui

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;



Enter fullscreen mode Exit fullscreen mode

Now we have successfully add upload functionnality.
upload-func

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

Discussion

pic
Editor guide