美文网首页
在vue项目中本地使用Tesseract.js

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

作者: 小雨喜欢大晴天 | 来源:发表于2020-01-22 18:53 被阅读0次

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

      本文链接:https://www.haomeiwen.com/subject/mixpzctx.html