vue中使用tesseract实现OCR/文字识别(识别图片中的文字)

文章目录

tesseract官网地址:https://tesseract.projectnaptha.com/

github:https://github.com/naptha/tesseract.js#tesseractjs

tesseract在线使用

npm安装依赖:

javasrcipt 复制代码
npm install tesseract.js

页面引入:

javasrcipt 复制代码
import Tesseract from 'tesseract.js'

js方法:

url : 图像地址

language: 语种 参数 chi_sim eng jpn

javasrcipt 复制代码
// 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文件夹下

文件不上传文件服务器

html 复制代码
          <input type="file" name="file" accept="image/png, image/jpeg, image/jpg" @change="change" style="margin-top: 30px"/>

可使用URL.createObjectURL将上传的文件生成临时url

javasrcipt 复制代码
    change() {
      //生成的临时url
      const url = URL.createObjectURL(document.querySelector('input[type=file]').files[0]);
      this.recognize(url);
    },

js方法

javasrcipt 复制代码
<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.progress
                  that.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托管。

相关推荐
程序员爱钓鱼几秒前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路22 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴30 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥33 分钟前
HTML之表单结构全解析
前端·html
聪聪的学习笔记44 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客3 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js