利用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表示假定图片中只有数字,大家可以根据自己需要去设置不同的值。
分享到