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?
If anyone else encounters this , here's the solution I found : tesseract typescript wrapper.
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) })
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.