带 Tesseract 离线的 Ionic 4 "Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'"

Question

我正在尝试在我的 Ionic 4 应用程序中以离线模式使用 Tesseract。为了做到这一点，我的代码基于 this example, although it is done with Ionic 3 and what the Tesseract GitHub explains regarding offline mode.

中解释的内容

首先，我将Tesseract文件放在src\assets\lib目录下如下（文件的tesseract-前缀是我加的）：

接下来我创建了一个服务，基本上创建了一个 Tesseract 离线模式实例，如上述链接所示：

  const path = this.webview.convertFileSrc(this.file.applicationDirectory + 'www/assets/lib/');

  this.tesseract = await Tesseract.create({
    langPath: path + 'tesseract-', 
    corePath: path + 'tesseract-index.js',
    workerPath: path + 'tesseract-worker.js',
  });

代码的一些注释：

this.file 是 '@ionic-native/file/ngx' 的 File。
调用 convertFileSrc 是为了避免在尝试直接加载 Javascript 文件时出现 unable to load resource 错误。
如果我使用 this.file.listDir 登录 this.file.applicationDirectory + 'www/assets/lib/' 的内容，我可以看到 Tesseract 个文件。

现在，当我将它部署到 Android emulator (Pixel 2 API 28) 并尝试调用此代码所在的函数时，我收到以下错误，根据 Chrome 调试器：

FWIW，这是我的环境：

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\guillem.vicens\AppData\Roaming\nvm\v10.15.3\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.6
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 6 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Users\myUser\AppData\Local\Android\Sdk)
   NodeJS            : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

我错过了什么？访问 assets 文件夹的正确方法是什么？

Answer 1

我终于设法通过使用非计算的 URL 基解决了我的问题。

我注意到正在从以下 URL 加载 tesseract-tesseract-js 文件：

http://localhost/assets/lib/tesseract-tesseract.js

但是 none 的其他文件已加载。这让我认为这个问题在某种程度上与 Tesseract.js 中与 webview 安全策略冲突的相对路径的内部使用有关。

更改我的代码以执行以下操作成功了：

  this.tesseract = await Tesseract.create({
    langPath: 'http://localhost/assets/lib/tesseract-', 
    corePath: 'http://localhost/assets/lib/tesseract-index.js',
    workerPath: 'http://localhost/assets/lib/tesseract-worker.js',
  });

我将不得不在真实手机和 iOS 上进行测试，但这回答了我最初的问题。

带 Tesseract 离线的 Ionic 4 "Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'"

Ionic 4 with Tesseract offline getting "Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'"

android

cordova

ionic-framework

tesseract.js

ionic4