How to get Tesseract to work with Angular2+?

Question

I am trying to use Tesseract in one my components to perform ocr on a file.

.ts:

import * as Tesseract from 'tesseract.js';

fileToUpload: File = null;
handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
  }
imageOcr() {
    Tesseract.recognize(this.fileToUpload)
      .progress(message => console.log(message))
      .catch(err => console.error(err))
      .then(res => console.log(res))
      .finally(resultOrError => console.log(resultOrError));
 }

.html

<div>
  <h6>Local Image OCR</h6>
  <input type="file" accept=".jpg,.png,.jpeg,.webp"  (change)="handleFileInput($event.target.files)">
  <button (click)="imageOcr()">click</button>
</div>

I followed this , however this error shows

"blob:http://localhost:4200/65999042-8757-4264-b92d-ed5e0a0e4c27:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:4200/dist/worker.dev.js?nocache=qf0eq67rus' failed to load.
    at blob:http://localhost:4200/65999042-8757-4264-b92d-ed5e0a0e4c27:1:1"

How or what should I do to make this work?

https://stackoverflow.com/questions/42594133/how-to-import-tesseract-into-angular2-typescript check this also this. https://www.npmjs.com/package/tesseract.ts — Abhishek Ekaanth, Apr 24 '19 at 12:08
:) as stated in my post , I already checked the link you just gave me and it doesn't work — tearswep, Apr 24 '19 at 12:15

score 0 · Accepted Answer · answered May 06 '19 at 12:09

0

If anyone else encounters this , here's the solution I found : tesseract typescript wrapper.

Here's a link to github

answered May 06 '19 at 12:09

tearswep

125
2
13

score 0 · Answer 2 · answered Jul 19 '19 at 13:49

No need to use another typescript wrapper dependency, when you can do it without using it also.

You need to install the actual javascript module:

npm install tesseract.js --save
Also install @types declarations:

npm install @types/tesseract.js --save
Finally do the folowing to import:

import * as Tesseract from 'tesseract.js'
Use it like this

let filename = 'assets/img/abcdefg.jpg' Tesseract.recognize(filename) .progress(function (p) { console.log('progress', p) }) .catch(err => console.error(err)) .then(function (result) { console.log("result ======<<<<>>>>>"); console.log(result.text) })

How to get Tesseract to work with Angular2+?

2 Answers2