文章目录
- tesseract在线使用
- npm安装依赖:
- 页面引入:
- js方法:
- tesseract离线使用
- 克隆仓库
- 拷贝 worker.min.js和tesseract-core.wasm.js
- index.html 引入tesseract.min.js
- 下载语言包
- 文件不上传文件服务器
- js方法
- 优化
tesseract官网地址:https://tesseract.projectnaptha.com/
github:https://github.com/naptha/tesseract.js#tesseractjs
tesseract在线使用
npm安装依赖:
npm install tesseract.js
页面引入:
import Tesseract from 'tesseract.js'
js方法:
url : 图像地址
language: 语种 参数 chi_sim eng jpn
// recognize 第一个参数:图像,第二个:语种
Tesseract.recognize(url,language,// { logger: m => console.log(m) }
).then((d) => {console.log(d.data.text);ocrStr.value = d.data.text
})
tesseract离线使用
克隆仓库
https://gitcode.net/mirrors/jeromewu/tesseract.js-offline.git
执行 npm install
拷贝 worker.min.js和tesseract-core.wasm.js
在public文件夹下新建tesseract,将刚刚克隆的项目里面的node_modules/tesseract.js/dist/worker.min.js和node_modules/tesseract.js-core/tesseract-core.wasm.js两个js文件拷贝到tesseract文件夹下
index.html 引入tesseract.min.js
<script src="/tesseract/tesseract.min.js"></script>
下载语言包
下载地址: https://github.com/naptha/tessdata/tree/gh-pages/4.0.0
可根据自行选择版本下载
如 https://github.com/naptha/tessdata/blob/gh-pages/4.0.0/chi_sim.traineddata.gz
https://github.com/naptha/tessdata/blob/gh-pages/4.0.0/eng.traineddata.gz
下载完成后,拷贝到tesseract/lang-data文件夹下
文件不上传文件服务器
<input type="file" name="file" accept="image/png, image/jpeg, image/jpg" @change="change" style="margin-top: 30px"/>
可使用URL.createObjectURL将上传的文件生成临时url
change() {//生成的临时urlconst url = URL.createObjectURL(document.querySelector('input[type=file]').files[0]);this.recognize(url);},
js方法
<script >
//为了在普通函数和ascyn函数中都能调用
let worker;
export default {name: "index",data(){return {}},methods: {//url 图片地址async recognize(url) {let that = this //避免this指向问题worker = Tesseract.createWorker({/* logger: m => {that.progress = m.progressthat.status = m.status},*///配置本地资源路径,语言包的实际位置是通过langPath+'/'+lang+'.traineddata.gz'得到的,所以不要改语言包文件名workerPath: '/tesseract/worker.min.js',corePath: '/tesseract/tesseract-core.wasm.js',langPath: '/tesseract/lang-data'})//调用async recognizeOcr函数进行识别let data = await this.recognizeOcr(url);console.log(data.data.text);},//url 图片地址async recognizeOcr(url){await worker.load();//可以通过'+'设置多个语言await worker.loadLanguage('chi_sim+eng+jpn'); await worker.initialize('chi_sim+eng+jpn');const data = await worker.recognize(url);return data;}}
}
</script>
优化
tesseract.j、lang-data、tesseract.js-core文件较大,以后项目npm run build和部署到服务器时都会比较慢,故建议有条件的同学放到cdn托管。