数据科学机器学习

利用tesseract.js实现OCR

最近做了关于OCR的一个研究和学习，发现谷歌的OCR框架已经开始支持JavaScript了，叫做Tesseract.js，很是惊奇，于是乎决定好好体验一把。

安装Tesseract.js

官方文档上说其实安装的过程非常简单，就是在你的JS中引入下面一段代码：

1
<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>

一旦这个脚本被引入了，那么在你的页面上全局变量Tesseract就生效了。

但是实际操作的时候，却远远不是引入一个js脚本就完事了。要踩的坑还不少，比如下面这段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
var defaultOptions = {
    // workerPath: 'https://cdn.rawgit.com/naptha/tesseract.js/0.2.0/dist/worker.js',
    corePath: 'https://cdn.rawgit.com/naptha/tesseract.js-core/0.1.0/index.js',
    langPath: 'https://cdn.rawgit.com/naptha/tessdata/gh-pages/3.02/'
};

if (process.env.NODE_ENV === "development") {
    console.debug('Using Development Configuration');
    defaultOptions.workerPath = location.protocol + '//' + location.host + '/dist/worker.dev.js?nocache=' + Math.random().toString(36).slice(3);
} else {
    var version = require('../../package.json').version;
    defaultOptions.workerPath = 'https://cdn.rawgit.com/naptha/tesseract.js/' + version + '/dist/worker.js';
}

里面涉及到的几个文件worker.js以及index.js一直因为网络原因或者是文件本身不存在导致读取一直失败。因此需要本地化，并且在初始化的时候指定为本地化的文件。

本地化

准备好几个文件，如下：

  • index.js
  • worker.js
  • tesseract.js
  • eng.traineddata.gz 【英语】

建议放在同一个目录下，不放在同一个也行，不过要指定好配置的文件地址。我们的文件目录结构如下：

  • 1024recognition/tesseract/*.js
  • 1024recognition/image/
  • 1024recognition/demo.html

在前端HTML页面中的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
window.Tesseract = Tesseract.create({
    workerPath: location.origin + '/1024recognition/tesseract/worker.js',
    langPath: location.origin + '/1024recognition/tesseract/',
    corePath: location.origin + '/1024recognition/tesseract/index.js'
});

Tesseract.recognize("image/1024-4.jpeg", {
    classify_bln_numeric_mode: 1,
    lang: 'eng'
}).then(function (result) {
    // $("#code").text(result.text);
    console.log("result is: " + result.text)
});

这里要注意工程需要以Web服务方式打开，即以http://开头，而不是以file:///开头，否则会报错的。

配置说明

上面其实已经给出具体的示例了，这里说明一下的就是识别方法Tesseract.recognize的配置参数：

  • 第一个参数可以是本地的一个图片，也可以是网络上的一个图片地址，还可以是一个base64格式的二进制图片格式；
  • 第二个参数就是配置信息，包括识别的语种等等。这里classify_bln_numeric_mode表示假定图片中只有数字，大家可以根据自己需要去设置不同的值。
分享到