基于tesseract.js的vue应用离线版

背景

近期公司项目有用到ocr识别图片输出文字的需求，一番搜索找到了tesseract.js，测试了一下性能，识别大概在4s左右，达到预期。
然后又因为是银行内部项目没有外网环境，需要做offline适配。做完之后，发现国内关于tesseract.js文章极少，特别还是offline版本，所以就有这篇文章。
要源码的可直接跳到文章最后自取。

初试tesseract.js-offline

这是一个官方的offline版本，分为浏览器（bower）版本和node版本，node版本的offline我是没整明白，考虑到vue使用的是bower环境，故在此基础上借鉴开发。
关键代码如下

// index.html
<script>
const { createWorker } = Tesseract;
    const worker = createWorker({
      workerPath: '../node_modules/tesseract.js/dist/worker.min.js',
      langPath: '../lang-data',
      corePath: '../node_modules/tesseract.js-core/tesseract-core.wasm.js',
      logger: m => console.log(m),
    });

    (async () => {
      await worker.load();
      await worker.loadLanguage('eng');
      await worker.initialize('eng');
      const { data: { text } } = await worker.recognize('../images/testocr.png');
      console.log(text);
      await worker.terminate();
    })();
</script>

分析

offline版本相比官方版本区别就在于createWorker的初始化配置项的workerPath、langPath、corePath,将这3个依赖下载到本地项目内是关键。
但是vue应用直接使用如上代码是会找不到路径，更别说npm run build生产环境下没有node_modules的情况。

解决关键

关键在于path路径，解决方案如下

安装tesseract.js、tesseract.js-core: npm i -S tesseract.js tesseract.js-core
去到node_modules找到如上2个依赖包，将他们复制到vue项目的public文件夹下
接下来解决语言包，打开tesseractjs官方语言包地址,找到你需要的语言包，我这里需要的是中文简体：chi_sim.traineddata.gz (经测试-中文简体语言包也支持26个英文识别)
将语言包同样放置public目录下
修改代码path路径，如下

const worker = createWorker({
  workerPath: "/tesseract/tesseract.js/dist/worker.min.js",
  langPath: "/tesseract/lang-data",
  corePath: "/tesseract/tesseract.js-core/tesseract-core.wasm.js",
  logger: (m) => console.log(m),
});

其他

资源cdn优化

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

github

github.com/q27488/tess…