Ionic Framework w/ OCR scanner?

1

Hello, is it possible to integrate an OCR plugin to an Ionic app? I didnt found anything on the ngCordova plugin list.

If so, can you point me at the plugin?

I don’t think any JS OCR plugin may be compatible with Ionic.

2

Im looking into the same thing. I think I will have to go native for my app :frowning: Keep in touch if you find anything.

3

Also looking for an OCR plugin, any suggestions?

4

Havent had any luck.

5

did you guys try Ocrad.js?
http://antimatter15.com/ocrad.js/demo.html

and i found this demo with cam:
http://kdzwinel.github.io/JS-OCR-demo/

6

Anyone have any ideas on if Firebase + OCR with Cloudpipes is a good solution?

7

Soo… I was able to find two plugins one for each platform haha. This might get you in the right direction as it uses the native app’s power to do this.

https://github.com/jcesarmobile/PhonegapOCRPlugin is the iOS one I was able to find and
http://scn.sap.com/community/developer-center/front-end/blog/2015/05/15/create-an-ocr-android-app-with-cordova-and-tesseract

is a link to how to use the android one.

I hope this gives you a good head start. Since it is cordova these should both be 100% compatible with Ionic, you just have to use the javascript calls and make sure that it stays in the angular run scope.

Good luck!

8

Wondering if you have any insight on performance for Tesseract on mobile?

9

I do not, it doesn’t look too hard if you got an example app going to test out a few different files. The tesseract is running native so that should really help. I’d expect a huge increase in speed using that over the javascript implementations.

10

What about https://www.npmjs.com/package/tesseract-js, might be a solution, I will test it out with ionic see where I end…

1 Like
11

Thank you, do let us know!

12

Hello Edouard,

any news about your test ?

13

Hi Guys,

I made this: https://github.com/matiastucci/ionic-ocr-example exmple.

Perhaps it can help you :smile:

14

tesseract ocr with android
what we did

  1. We have created the Cordova project.
  2. We have added tess-two in to Cordova project by using https://github.com/rmtheis/tess-two
  3. Updated the build.gradle (Android) dependency compile project(:libraries:tess-two) and updated the setting.gradle include ‘:libraries:tess-two’.
    using this URL https://coderwall.com/p/eurvaq/tesseract-with-andoird-and-gradle
  4. build successfully but getting error at line
    TessBaseAPI baseApi = new TessBaseAPI();
    object creation.
    “no jni_onload found in /data/app-lib/” .
    like this http://stackoverflow.com/questions/11798054/no-jni-onload-found-in-skipping-init

please advice…

main refer url http://scn.sap.com/community/developer-center/front-end/blog/2015/05/15/create-an-ocr-android-app-with-cordova-and-tesseract

15

I have implemented this thing in ionic3 using npm packages.

command to install the package
sudo npm install tessetact.js

Using the plugin in ionic2 project.

import Tesseract from ‘tesseract.js’;

		Tesseract.recognize("./img/text.png")
		.progress((progress) => {
			console.log('progress', progress);
		})
		.then((tesseractResult) => {
			console.log(tesseractResult);
			this.recognizedText = tesseractResult.text;
			console.log("this is the data we collected from image");
			console.log(this.recognizedText);
		});
1 Like
16

I used this code and it worked perfectly when testing on a browser, however when running on my android device it shows a blank page, any idea on how i can handle this code on a real device will be of great importance?

1 Like
17

hello,

maybe you should show related code, otherwise it is nearly impossible to help you.

Best regards, anna-liebt.

18

Thanks for your response @anna_liebt , this is my full code.

import { Component } from ‘@angular/core’;
import { NavController, LoadingController, Events, ToastController, NavParams, AlertController} from ‘ionic-angular’;
import * as Tesseract from ‘tesseract.js’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

public loader: any;
public recognizedText: string;

constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtr: ToastController, public loadingCtrl: LoadingController, public alertCtrl: AlertController) {
this.loader = this.loadingCtrl.create({
spinner: ‘ios’,
content: ‘Reading’
});
}

ionViewDidLoad() {
this.text()
}

text(){
Tesseract.recognize("./img/img.jpg")
.progress((progress) => {
this.loader.present();
})
.then((tesseractResult) => {
this.loader.dismiss();
this.recognizedText = tesseractResult.text;
console.log(“this is the data we collected from image”);
this.alerts(this.recognizedText);
});
}

alerts (message: string) {
this.alertCtrl.create({
subTitle: message,
buttons: [‘OK’]
}).present();
}

}

19

hello,
the code is bad readable because you doesn’t use the function from editor to embed code.

At the first look, it is maybe the path of your image. Think about that paths that are on browser are available not available at device.

Best regards, anna-liebt

20

@anna_liebt But the app does not even show the toolbar for the home page, i even removed the call for the text() function from ionViewDidLoad() {} and set a button to call the function but the button could not be displayed. So i think the issue occurs before the path is referenced.