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

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

下载语言包

下载地址： 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() {
      //生成的临时url
      const url = URL.createObjectURL(document.querySelector('input[type=file]').files[0]);
      this.recognize(url);
    },

js方法

优化

tesseract.j、lang-data、tesseract.js-core文件较大，以后项目npm run build和部署到服务器时都会比较慢，故建议有条件的同学放到cdn托管。