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
Top comments (0)