在vue项目中本地使用Tesseract.js

1. Tesseract.js 是什么？

Tesseract.js is a javascript library that gets words in almost any language out of images.

官方文档：https://github.com/naptha/tesseract.js

2. 如何在vue项目中本地引用

第一步：下载官方vue示例

With Vue: https://github.com/jeromewu/tesseract.js-vue-app

第二步：npm install 后从dist文件夹获取几个文件

tesseract.min.js
worker.min.js
tesseract-core.wasm.js

(我把这些文件都放到./static/tesseract下了)

第三部：下载需要的语言包

https://github.com/tesseract-ocr/tesseract/wiki/Data-Files#data-files-for-version-400-november-29-2016
比如简体中文下载地址：https://tessdata.projectnaptha.com/4.0.0/chi_sim.traineddata.gz
下载得到文件 chi_sim.traineddata.gz (不要改文件名)

第四步：在vue的index.html文件中引入tesseract

<script src="./static/tesseract/tesseract.min.js"></script>

引入后Tesseract就变成一个全局变量了

第五步：在js文件中配置和使用

页面结构：

<template>
    <div>
        <input type="file" name="file" />   
        <button @click="recognize">识别</button>
        <p>状态：{{status}}</p>
        <p>已完成:{{progress}}</p>
    </div>
</template>

js部分：
ps.为了给progress和status赋值，需要解决this指向问题，async函数中的this指向和普通函数不同，所以拆成了两个函数

let worker //为了在普通函数和ascyn函数中都能调用，在这里声明一下

export default {
    data(){
        return {
            progress: '', //进度 
            status: '' //状态
        }
    },
    methods:{
        recognize(){
            let that = this //避免this指向问题
            worker = Tesseract.createWorker({
                logger: m => {
                    that.progress = m.progress
                    that.status = m.status
                },
                //配置本地资源路径，语言包的实际位置是通过langPath+'/'+lang+'.traineddata.gz'得到的，所以不要改语言包文件名
                workerPath: './static/tesseract/worker.min.js',
                corePath: './static/tesseract/tesseract-core.wasm.js',
                langPath: './static/tesseract'
            })
            this.recognize0() //调用async函数进行识别
        },
        recognize0: async()=>{
            const img = URL.createObjectURL(document.querySelector('input[type=file]').files[0]); //识别的图像可以使url也可以是img元素，此处是生成的临时url
            await worker.load();
            await worker.loadLanguage('chi_sim+eng'); //可以通过'+'设置多个语言
            await worker.initialize('chi_sim+eng', Tesseract.OEM.LSTM_ONLY);
            await worker.setParameters({
                tessedit_pageseg_mode: Tesseract.PSM.SINGLE_BLOCK,
            });
            const { data: { text } } = await worker.recognize(img);
            console.log(text); //得到最终识别结果
            alert(text)
        }
    }
}

3. 存在问题

通过logger打印得到Tesseract.js的识别过程如下

loading tesseract core
initializing tesseract
loading language traineddata
initializing api
recognizing text

在chrome上调试的时候一直是好的，但是部署到移动端web上时出现了问题
第一阶段：安卓可以识别，ios不可以，卡在loading tesseract core进度为0处不往下走
第二阶段：同事说可能是静态资源存放位置不对，ios要求严格，所以试了几种写法，安卓时好时坏，ios一直不行
第三阶段：尝试了非本地的cdn引用，ios可以识别但特别特别特别慢，安卓不行
第四阶段：用“ctrl+z”改回了最初的模样，安卓也不行了卡在recognizing text进度为0，ios还是loading tesseract core进度为0（令人迷惑，原本安卓不是能用吗？！）

以上各阶段在chrome上都是能识别的，不知道该怎么调试了，要哭了(๑′°︿°๑) ，哪位大神帮忙解答一下

在vue项目中本地使用Tesseract.js