Tesseract.js使用教程
1、安装 tesseract.js
npm install tesseract.js
2、在vue中引入tesseract.js
import Tesseract from 'tesseract.js'
3、调用recognize 方法
Tesseract.recognize(
url, //表示图片路径
'chi_sim', //表示识别的目标语言
).then((d) => {
//获取识别的文本
console.log(d.data.text);
this.msg = d.data.text;
ocrStr.value = d.data.text
})
4、整合vue的图片上传，完整代码
<template>
<div>
<el-button class="primary" @click="dialogVisible = true">图片识别</el-button>
<div class="home" style="width:100%;height:500px">
<el-dialog
title="图片识别"
:visible.sync="dialogVisible"
width="30%"
>
<el-upload class="upload-demo"
:auto-upload="false"
:on-change="getImgUrl"
:show-file-list="false"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-image class="imgspan" :src="imgUrl">
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
<el-button size="small" type="primary" @click="getTextByImg">识别图片信息</el-button>
</el-dialog>
<!-- 图片文字识别展示 -->
<div>
{{msg}}
<hr>
{{msg1}}
<hr>
<h3>每一列的数据：</h3>
<ul>
<li v-for="item in lines" :key="item">
{{item.text.replace(/\s*/g,"")}}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
// 1.引入tesseract.js
import Tesseract from 'tesseract.js';
export default {
data () {
return {
dialogVisible:false,
//显示上传的图片
imgUrl:'',
msg:'',
msg1:'',
lines:[]
}
},
methods: {
//点击获取图片路径
getImgUrl(file){
this.imgUrl = file.url
},
//识别图片内容
getTextByImg(){
// recognize方法的 第一个参数：图像，第二个：语种
Tesseract.recognize(
this.imgUrl,
'chi_sim',
// { logger: m => console.log(m) }
).then((d) => {
console.log(d);
//获取每一列的文本信息
this.lines = d.data.lines
//获取权保护文本
this.msg = d.data.text;
//去除空格
this.msg1 = d.data.text.replace(/\s*/g,"")
//识别完成之后关闭模态框
this.dialogVisible = false
})
}
},
}
</script>
<style scoped>
.imgspan{
width: 100%;
height: 200px;
}
</style>