如何让 Tesseract 与 Angular 2 一起工作？答案

【问题标题】：How to get Tesseract to work with Angular2+?如何让 Tesseract 与 Angular 2 一起工作？
【发布时间】：2019-04-24 11:50:28
【问题描述】：

我正在尝试在我的一个组件中使用 Tesseract 对文件执行 ocr。

.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>

我关注了this，但是这个错误显示

"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"

我应该如何或做什么来完成这项工作？

【问题讨论】：

stackoverflow.com/questions/42594133/… 也检查一下这个。 npmjs.com/package/tesseract.ts
:) 正如我的帖子中所述，我已经检查了您刚刚给我的链接，但它不起作用

标签： angular typescript import ocr tesseract

【解决方案1】：

如果其他人遇到这种情况，这是我找到的解决方案：tesseract typescript wrapper。

Here's a link to github

【讨论】：

【解决方案2】：

不需要使用另一个 typescript 包装器依赖项，如果你也可以不使用它。

您需要安装实际的 javascript 模块：

npm install tesseract.js --save
同时安装@types 声明：

npm install @types/tesseract.js --save
最后做如下导入：

import * as Tesseract from 'tesseract.js'
这样使用

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) })

【讨论】：