我之前在做Ionic项目集成Tesseract.js时也碰到过一模一样的问题——浏览器端跑起来完全正常，但安卓打包后直接显示空白页。结合踩过的坑，给你几个实用的排查和解决方向：

1. 修复文件路径问题 #

浏览器里的相对路径./img/img.jpg在安卓原生环境里根本找不到！安卓的文件系统和Web环境逻辑完全不同，你需要用Ionic的文件系统插件来获取正确的本地文件路径：

• 先安装@ionic-native/file插件，把assets里的图片复制到应用可读写的目录（比如externalDataDirectory）
• 用复制后的绝对原生路径（nativeURL）传给Tesseract.recognize，而不是Web环境的相对路径

2. 本地化Tesseract语言包 #

Tesseract默认会在线下载语言训练包（比如eng.traineddata），安卓设备可能因为网络限制、跨域或者打包后的资源访问规则，导致下载卡住，直接让页面崩溃：

• 把需要的语言包（比如英文包）下载下来，放到项目的assets/tessdata/目录
• 调用Tesseract时指定本地语言包路径：

  Tesseract.recognize(imagePath, 'eng', {
    langPath: 'assets/tessdata/'
  })
  

• 同时建议把Tesseract的worker文件也本地化，避免在线加载失败：

  Tesseract.setWorkerOptions({
    workerPath: 'assets/tesseract/worker.min.js'
  });
  

3. 检查安卓权限 #

如果你的图片是从相册或相机获取的，安卓系统会严格限制应用访问外部存储，权限不足会导致文件读取失败，进而引发页面空白：

• 安装@ionic-native/android-permissions插件
• 在调用OCR之前，先检查并申请READ_EXTERNAL_STORAGE权限，确保权限通过后再执行识别逻辑

4. 优化性能避免主线程阻塞 #

Tesseract的OCR识别很耗资源，安卓设备性能有限的话，容易阻塞主线程导致页面卡死空白：

• 先对图片进行压缩或缩小尺寸，再传给Tesseract
• 用async/await替代链式调用，配合try/catch捕获错误，避免未处理的异常直接导致页面崩溃

5. 用Chrome远程调试定位具体错误 #

空白页大多是因为有未捕获的JS错误，你可以用Chrome的远程调试功能（打开chrome://inspect连接安卓设备）查看控制台的错误信息，比如：

• 文件找不到的报错
• 权限被拒绝的提示
• 语言包加载失败的日志

修改后的示例代码 #

import * as Tesseract from 'tesseract.js';
import { File } from '@ionic-native/file';
import { AndroidPermissions } from '@ionic-native/android-permissions';

constructor(private file: File, private androidPermissions: AndroidPermissions) {}

async startOCR() {
  // 1. 检查并申请存储权限
  const permissionStatus = await this.androidPermissions.checkPermission(
    this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE
  );
  if (!permissionStatus.hasPermission) {
    const requestResult = await this.androidPermissions.requestPermission(
      this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE
    );
    if (!requestResult.hasPermission) {
      console.log('存储权限被拒绝，无法进行OCR');
      return;
    }
  }

  // 2. 复制assets里的图片到应用可访问目录
  try {
    const copiedFile = await this.file.copyFile(
      this.file.applicationDirectory + 'www/assets/img/',
      'img.jpg',
      this.file.externalDataDirectory,
      'img.jpg'
    );

    // 3. 配置Tesseract本地资源路径
    Tesseract.setWorkerOptions({
      workerPath: 'assets/tesseract/worker.min.js',
      langPath: 'assets/tessdata/'
    });

    this.loader.present();

    // 4. 执行OCR识别
    const tesseractResult = await Tesseract.recognize(copiedFile.nativeURL, 'eng');
    
    this.loader.dismiss();
    this.recognizedText = tesseractResult.text;
    console.log('识别结果:', this.recognizedText);
    this.alerts(this.recognizedText);
  } catch (error) {
    this.loader.dismiss();
    console.error('OCR执行出错:', error);
    this.alerts('识别失败，请检查日志');
  }
}

别忘了安装对应的插件：

ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file

ionic cordova plugin add cordova-plugin-android-permissions
npm install @ionic-native/android-permissions

内容的提问来源于stack exchange，提问作者Duncan Omwoyo