基于Tesseract的OCR识别小程序

一、背景

先说下开发背景，今年有次搬家找房子(2020了应该叫去年了)，发现每天都要对着各种租房广告打很多电话。（当然网上也找了实地也找），每次基本都是对着墙面看电话号码然后拨打，次数一多就感觉非常麻烦，如果没看清还容易输错一个号码。

                                           图片来自于网络

当时就想现在OCR技术那么流行，为什么不能做个程序来解决这个问题。因为租房电话有部分还是手写号码，所以也要解决手写识别的问题。同时租房信息其实也有很多是中介或者其他诈骗类等等。所以有部分并不是我们所需要的，为什么这块信息就不能做个平台进行共享，类似于手机里面识别和提交诈骗电话一样。然后自己也搜索了下微信小程序里有没有类似的小程序，发现基本没有，有些OCR相关程序但是使用相对繁琐，并多数需要收费或开通会员等。

所以自己就想着还是自己来开发一个相关的小程序，功能简单，通过相机拍照获取电话号码，进行识别；可直接在里面调用电话进行拨号。同时允许提交该识别后的号码作为标记，标记成诈骗、中介等。当某个号码被人标记后，下次任何人再识别该号码后就能显示对应的标记信息。

二、核心问题

本次核心问题可能就是手写识别了，普通的打印文字识别。已经很常见也很成熟了。我们主要是识别数字，所以只针对数字手写识别。这些年第三方的例如BAT其实都有类似的服务接口提供，我也研究了下，对接很简单。识别率还算行，能够达到70%左右。毕竟手写每个人千差万别。但是第三方的终究都是要收费的，当然有一定的免费额度。我开发这个软件也没打算收费什么的，所以第三方的暂且放弃使用了。

MNIST机器学习

现在比较热门的都是基于机器学习的手写识别，机器学习框架有很多常用的比如TensorFlow ，在手写数字识别里面MNIST 数据集是最常用的，甚至流行到一般机器学习框架都使用MNIST 做入门教程了。关于MNIST我在这里不做具体介绍,有兴趣的可以自行上网了解。

然后我就网上找python机器学习手写数字识别之类的，学习了很久。最后感觉使用MNIST数据集做识别更多还是一种识别算法的比较。因为MNIST里本身就包含了样本和测试数据集。通过机器学习将样本的进行学习然后生成一个模型数据，然后根据模型数据去读取样本数据进行比较以此来查识别成功率。并且网上的案例基本都是类似，即根据数据集来学习和识别正确率。 

我还找到了.NET Core使用ML.NET 基于MNIST数据集的手写数字识别，运行结果如下图所示。原理和过程和Python处理是一样的，包括输出结果。

MNIST数据集是每张均为28*28像素的黑白图片，并且是一个字符占用一张图片。我们平时OCR识别的时候都是一张图一起识别所有文字(数字)。所以如果使用MNIST我们必须要对图片文字(数字)进行精准分割再把图像进行二值化保存为20*28像素的。手写数字很多可能连载在一起，在此基础上做分割还是有一定难度。

所以这里暂时放弃使用了，后续抽时间会继续研究使用MNIST进行识别。

Tesseract

Tesseract 是一个相对于比较有名的开源OCR识别软件早期由惠普实验室开发，现在是由Google在开发和维护。支持的平台有Windows、linux、macos。支持的很多常用语言识别多达几十种；还可以自己训练文字库，如果使用手写识别所以需要自己去训练字库进行识别。

具体我就不过多阐述介绍了，感兴趣的自行了解。我本次开发就是选用的Tesseract进行识别。

GitHub: https://github.com/tesseract-ocr/tesseract

三、前端开发

本次前端使用的是微信小程序，小程序因为不用安装并且完全跨平台。自己不是专业前端开发，所以不过多介绍，只介绍小程序里如何使用相机拍照并且裁剪指定区域等。

1、拍照

相机拍照界面，因为只识别一个号码所以拍照区域不需要很大，如果单纯的把相机缩小又感觉很丑的样子。所以有点类似微信扫描那样的，需要的部分全亮其他部分半透明的效果。

如下图所示

一开始一直在想小程序的相机是否提供类似的功能，让我通过设置甚直接达到这样的效果。但是很可惜没找到，相机上面加文字图片都是可以的。其实这个一部分透明一般分半透明就是一个图片。整个背景是个图片，这也是自己想好了好久才想到的，然后自己通过PS把一张图做成透明和半透明的效果。

代码如下：

 1 <camera device - position="width" flash="off" style="height:{
   {height}}px;">
 2   <cover-view class='camerabgImage-view'>
 3      <cover-image class='bgImage' src='../images/bg2.png'> </cover-image> 
 4     <cover-view class='cameraTips'>请对准电话号码扫描</cover-view>
 5     <cover-view class="cameraTips2">*支持打印和手写号码识别</cover-view>
 6     <cover-view class="cameraBgView">
 7       <cover-image class='cancelphoto' src='../images/cancelPhoto2.png' bindtap='cancelPhoto'></cover-image>
 8       <cover-view class='cameraButton-view'>
 9         <cover-image class='takephoto' src='../images/takephoto.png' bindtap='takePhoto'></cover-image>
10       </cover-view>
11     </cover-view>
12   </cover-view>
13 </camera>

具体详细代码，请看文章结尾github地址。

2、裁剪

拍照界面实现了，下一步就是要实现拍照功能了，拍照代码简单，不做过多阐述。因为我们是要取完全透明的那一块区域的图像。也就是照片的指定位置，在拍照的api里面微信没有提供类似的获取指定区域图像的功能，所以我们要实现这功能就需要自己针对一个完整的图片信息进行裁剪。

如何截取这部分图像呢？目前我的做法是根据框框的位置去找出在整个图像中的位置即对应的X,Y。因为我们整个框框本来就是一张背景图的一部分，所以它在代码中是没有一个实际坐标位置的。我们需要将裁剪后的图像展示出来，所以在另个页面还需要一个canvas用来展示裁剪后的图像。

下面代码看到了我使用了延迟和出错重试机制，因为在实际真机测试中偶尔还是会出现canvasToTempFilePath 方法报错问题。原因就是在调用canvasToTempFilePath  前面需要绘制一个矩形框用于展示我们截取后的图片。但是canvas.draw()方法是异步的，这样就会导致前面还没绘制完下面canvasToTempFilePath方法报错。

裁剪主要代码如下：

 1   canvasToTempFile: function() {
 2     var that = this;
 3     setTimeout(function() {
 4       wx.canvasToTempFilePath({ // 裁剪对参数
 5         canvasId: "image-canvas",
 6         x: that.data.image_x, // 画布x轴起点
 7         y: that.data.image_y, // 画布y轴起点 
 8         width: that.data.width, // 画布宽度
 9         height: that.data.image_height, // 画布高度
10         destWidth: that.data.width, // 输出图片宽度
11         destHeight: that.data.image_height, // 输出图片高度
12         canvasId: 'image-canvas',
13         success: function(res) {
14           that.filePath = res.tempFilePath;
15           // 清除画布上在该矩形区域内的内容。
16           that.canvas.clearRect(0, 0, that.data.width, that.data.height);
17           that.canvas.drawImage(that.filePath, th