![]() Next, paste the following code after the readImageText function block: Once the OCR process is ready, we call the recognize method to actually start the process.įinally, we call the terminate method to terminate the worker and clean up when the OCR process is completed. To initialize the OCR process, we call the initialize method. In this tutorial, we use eng, which represents English. We specify the language to be recognized by the OCR process using the loadLanguage method. There are several methods in the worker instance. This status is updated whenever the processing status of Tesseract.js changes. The OCR process is handled by the readImageText asynchronous function.Īs soon as the function is called, we’re setting the OCR processing status to PENDING. We’re also defining and instantiating Tesseract.js’s worker as a variable. Then we’re defining the state regarding whether the image to be processed is selected ( selectedImage), and the state regarding the execution status of OCR processing ( ocrState) with the useState hook. In the parameter of the OcrReader function, we’re passing onReadOcrData and onRemoveClicked as props to the parent component. Let’s go through the above code in detail. Open the App.js file in a text editor.Ĭhange the contents of the file to the following code: Edit the App.js file located in /src that was automatically created when you ran create-react-app. In the terminal, create a /components folder inside the /src directory.Ĭreate OcrReader.js and SmsSender.js files in the /components folder. ![]() Building the Front Endįirst, we’ll create the front end components. Once the installation is complete, the next step is to build the front end. A JavaScript package for entering and verifying international phone numbers. intl-tel-input: International Telephone Input.dotenv: Package for importing the values defined in.In this tutorial, we will use it to send SMS. express: A web server framework used in Node.js.twilio: Twilio Node helper library, a package to send HTTP requests to the Twilio API using Node.js.tesseract.js: JavaScript OCR library that runs in the browser.The details of the dependencies installed are as follows: Open a terminal and execute the following command: Basic setup Creating a React project with create-react-app Now that you understand the general structure of the app, let’s move on to creating the project. server.js: Server file for sending SMS with Node.js and Express.SmsSender: Component for an editor for the recognized text and a field for sending SMS.OcrReader: Component for the image upload function and OCR processing button.App: The root component, which is the execution entry point for the project.The specific structure of the app is as follows: The back end uses Node.js and Express to handle the SMS sending process. The front end displays the image upload button, OCR processing button, text editor and SMS sending fields. In the application you’ll create, you’ll prepare a front end and a back end. This tutorial assumes the basic knowledge of:
0 Comments
Leave a Reply. |