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示例
第二步：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上都是能识别的，不知道该怎么调试了，要哭了(๑′°︿°๑) ，哪位大神帮忙解答一下
