与Tesseract脱机的Ionic 4收到“未捕获的DOMException:无法在'WorkerGlobalScope'上执行'importScripts'" [英] Ionic 4 with Tesseract offline getting "Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'"

问题描述

我正在尝试在Ionic 4应用程序中的离线模式下使用Tesseract.为了做到这一点，我的代码基于此内容中的解释示例，尽管它是用Ionic 3完成的，以及Tesseract GitHub关于离线模式.

I am trying to use Tesseract in offline mode in my Ionic 4 app. In order to do it I have based my code on what is explained in this example, although it is done with Ionic 3 and what the Tesseract GitHub explains regarding offline mode.

首先，我将Tesseract文件放置在目录中，如下所示(文件的tesseract-前缀已由我添加):

First, I have put the Tesseract files in the src\assets\lib directory as follows (the tesseract- prefix for the files has been added by me):

接下来，我创建了一个服务，该服务基本上创建了Tesseract脱机模式实例，如上述链接所示:

Next I created a service that basically creates a Tesseract offline mode instance as indicated in the above mentioned links:

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

• this.file is a File from '@ionic-native/file/ngx'.
• The call to convertFileSrc is to avoid the unable to load resource error you get when trying to load the Javascript files directly.
• If i log with this.file.listDir the contents of this.file.applicationDirectory + 'www/assets/lib/' I can see the Tesseract files.

现在，当我将其部署到Android emulator (Pixel 2 API 28)并尝试调用此代码所在的函数时，按照Chrome调试器，我得到以下错误:

Now, when I deploy this to an Android emulator (Pixel 2 API 28) and try to call the function where this code is I get following error, as per the Chrome debugger:

FWIW，这是我的环境:

FWIW, this is my environment:

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文件夹的正确方法是什么?

What am I missing? What is the correct way to access the assets folder?

推荐答案

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

I finally managed to solve my problem by using a non-calculated URL base.

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

I noticed that the tesseract-tesseract-js file was being loaded from the following URL:

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

但是没有其他人被加载.这使我认为问题出在某种程度上与Tesseract.js内部使用的与Webview安全策略相冲突的相对路径有关.

But none of the others were loaded. This made me think that the problem was somehow related to the internal use in Tesseract.js of relative paths that collided with the webview security policies.

更改我的代码以执行以下操作就可以了:

Changing my code to do following did the trick:

  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上对此进行测试，但这可以回答我的原始问题.

I will have to test this on real mobile phones and on iOS, but this answers my original question.

这篇关于与Tesseract脱机的Ionic 4收到“未捕获的DOMException:无法在'WorkerGlobalScope'上执行'importScripts'"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！