Optical Character Recognition in React

Hello People. This article discusses about Optical Character Recognition in React. OCR is very useful when you want to extract text from a scanned document on a browser. Applying OCR technology through a React application, you can upload your images in various formats and can apply OCR to extract text content so easily. 

How to achieve Optical Character Recognition in React?

We’ll use two third party libraries for different purposes. The first one is “tesseract.js”. It’ll allow us to run OCR easily with just a couple of lines of code. The second one is “react-images-upload”, it’ll allow us to upload images to the browser and access their locations easily.

Here we do a couple of new things and you may want to follow them carefully. We should put the code snippet above the return we need to create 3 states here to achieve different goals. The first state we have here is to take the image URLs from our ImageUploader component and save it for further processing, the second state is the one that we keep our OCR applied texts, and the third one is the one for loading logic.

Optical Character Recognition in React

onDrop function is called whenever a change happened in our ImageUploader component . So whenever a change happens like adding or removing the photos in our component this function will be fired up. It’ll take the argument we need in the second position after the onChange event is fired so we can simply bypass the first argument by putting “_” and take the second one. It has link/links for our images in it and it’ll bring the full latest list of links so whenever we get a list from our function we can safely put that in our array.

runOcr function seems tricky but in fact, it’s quite simple, we take our URLs state and run the following recognition script for each element. Tesseract recognize function takes at least 2 arguments, first is the URL and the second one is the target language, tesseract.js supports over 100 languages. After the requests resolve we take output text and add it to our current array. After we fire runOcr command we can setIsLoading to true so we can display our spinner.

Hope this article on Optical Character Recognition in React is useful to you. Please read What is Node Red and its application

Navigation

× Contact Us