Ionic 4与Tesseract离线获取“未捕获DOMException：无法在'WorkerGlobalScope'上执行'importScripts'”

Question

我想在我的Tesseract应用程序中在离线模式下使用Ionic 4。为了做到这一点，我的代码基于this example中的解释，尽管它是用Ionic 3完成的，以及Tesseract GitHub对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是来自File的'@ionic-native/file/ngx'。
• 对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库来解决我的问题。

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

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

但其他人都没有被装上。这让我觉得这个问题在某种程度上与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上测试这个，但这回答了我原来的问题。