Optical Character Recognition (OCR) App
Create an app that recognizes text in images and outputs it as a string
In this tutorial, we will create an app that performs optical character recognition (OCR) using JavaScript.
By using Tesseract.js,, a JavaScript library, OCR can be performed directly in the browser. Here, we use Tesseract.js, with JavaScript inside a WebView to carry out OCR. However, since only string data can be passed between the WebView and the App Inventor app, the image must first be converted to a string by encoding it in Base64. For this purpose, we use an extension called uk.co.metricrat.imagebase64v2.aix.
You can download the source code (aia file) from the download section at the bottom of the page.
From the [Projects] menu, select [Start new project] and name it “SimpleOCR".
What You Will Learn in This Tutorial
- How to run JavaScript in a WebView
- How to exchange values with a WebView
- How to use Tesseract.js
Components Used
Label, Image, TextBox, Webview, ImagePicker, ImageBase641
Blocks Used
when Screen1.Initialize
Designer
Set the title of Screen1 to “Optical Character Recognition".
Click the “Upload File" button and upload the ocr.html file that you downloaded from the Download section at the bottom of the page.
Download the uk.co.metricrat.imagebase64v2.aix extension from https://metricrat-hosting.web.app/files/uk.co.metricrat.imagebase64v2.aix , upload it to the Extensions palette, and then add it to the Viewer.
Add Label (Label1), Image (Image1), Label (Label2), TextBox (TextBox1), WebView (WebView1), to the Viewer from the User Interface palette. Add ImagePicker (ImagePicker1) to the Viewer from the Media palette.
Set their properties as follows. (The component names are shown in parentheses.)
- Label1: FontBold = Checked, FontSize = 20, Text = Image
- Image1: ScalePictureToFit = Checked
- Label2: FontBold = Checked, FontSize = 20, Text = Recognized text
- TextBox1: BackgroundColor = Gray, Width = Fill Parent, TextColor = White, MultiLine = Checked
- WebView1: Visible = Unchecked
- ImagePicker1: Text = Select Image
