拍照怎么搜题？（上）

/* * 写在前面的两句话： * 1、老王写完上一篇《HTTPS到底是个啥玩意儿？》以后，就想再顺势写几篇技...



/*
* 写在前面的两句话：
* 1、老王写完上一篇《HTTPS到底是个啥玩意儿？》以后，就想再顺势写几篇技术干货，于是乎有了接下来这一篇文章。
* 2、大家如果想看上一篇，以及未来的n篇，可以关注微信：simplemain
*/

前一段时间几个拍照搜题的软件挺流行（比如：小猿搜题、作业帮、学霸君等），手机拍张照片，就能把考题的答案搜出来，完全不用去百度手敲。这可乐坏了莘莘学子们，不过不知道父母是什么感受。

出于程序员那种职业的好奇心，同时也去评估一下做这个事情的难度和成本，老王用了两周的时间做了一个简单的研究并写了一个demo程序，这里分享给大家（注：由于研究时间不长，如有不正确的地方请专家们指正~）

拍照搜题的技术点主要由图像识别和内容搜索组成，将拍照图像中的文字或者图形识别出来，再交给检索系统，对已有的题目进行快速的搜索，找出最相似的题目。由于之前对搜索技术有过一定的了解（毕竟在狼厂干过几年，耳濡目染^_^），所以这次主要聚焦到图像文本的识别上。同时，只是调研性质，所以为了降低难度，我这次只做了英语的识别。

先给大家看看最后的效果。以下是随便用手机拍的一段英文文章：


最后识别出来以后，没有做任何的单词校正工作，效果如下：
=======================================
Three months after [he government stopped issulng (&%) or renewing permits for In[ernet cafes because of security (%#) concerns, some cafe owners are having flnanclal (ff%%) concerns of their own.
=======================================

后来，我的同事tt和yx可怜我，帮我做了两个相关的单词匹配算法，对单词做校正，使得一些识别的不准的单词得到校正，比如：issulng -> issuing。

好了，开始正题吧~

整个过程大体分为两个阶段：
1、图像的处理。就是将我们拍的照片进行清理（有点类似于洗衣服），然后对图像中的字符进行切分，为字符的识别做准备。大概分成几个过程，分别是：
a、灰度处理：将彩色图片变成灰度图
b、二值化：将灰度图变成黑白图
c、去噪：消除黑白图上的噪点，让图看起来更干净
d、旋转：对图片进行顺时针和逆时针旋转，找到一个最佳水平位置
e、水平切割：对调整好水平位置的图片进行一行一行的切割
f、垂直切割：对一行一行的图片进行一列一列的切割，产出单个的字符。

2、图像的识别。就是将上面的一个个单独字符的图片进行判别，看他到底是哪个字符。

你是不是感觉有点晕了呢？不错，是我我也晕了，哈哈哈~
还记得我们的理念嘛？把复杂的问题，简单的讲清楚！
来吧，老王不会干巴巴的讲那些无聊的理论，看看实际怎么处理的吧。第一步，我们拍照得到原图。



肉眼看，你觉得这个图是不是黑白的？
回答“是”的同学，我负责任的告诉你，你的眼睛欺骗了你。可以用图像处理软件看看每一个像素，他们其实是彩色！！！
彩色有什么问题么？对于人眼来说，当然没有。不过对于我们的程序来说，就是有问题的。他不知道哪个颜色是有效信息。所以，我们接下来的工作，就是对信息进行降维，将RGB（红绿蓝）的256*256*256种色值降维到2种，即：白+黑。这样，我们的程序就能很轻松的判断信息的有效性了。
好了，要实现白+黑，还得分两步走：先灰，再黑白。

那么，老王要问问题了：

问：什么是黑色？
答：R = 0, G = 0, B = 0，也就是css中的#000000

问：什么是白色？
答：R = 255, G = 255, B = 255，也即#ffffff

问：什么是灰色？
答：诶……

老王也不知道明确的定义，但是老王知道是：R = G = B。也就是红绿蓝的色值相等的颜色。比如，我们经常在css中设置的值：#e0e0e0 #9c9c9c等等。第二步，就是把上面拍的原始图变成灰度图。



仔细跟上面的图片对比一下，有什么不一样嘛？考验像素眼的时候到了！如果眼睛还是看不出来，我做一张对比图给大家看看：



看出区别来了嘛？如果还没看出来，请用图像处理软件查看图上下部分的每一个像素。

那么，彩色图是怎么变到灰度图的呢？
我们知道，每一个像素的颜色值可以由RGB三原色来表示，比如：红色=RGB(255, 0, 0)，黄色=RGB(255, 255, 0)。如果我们将每个像素的设置成一样的，他就变成灰色了，比如：Color-Pixel(x, y) = RGB(r, g, b) => RGB(t, t, t)，其中 t = r * k + g * p + b * q 并且k + p + q = 1，这样的话，就可以把彩色变成灰白了。

这里k、p、q的取值有很多很多种，一般说取0.11、0.59、0.3 或者 1/3、1/3、1/3。至于为什么，我就没有去深究了~
我的算法里，取的是1/3、1/3、1/3。

好了，有了灰色图，我们怎么把他变黑白呢？（装B的说法：二值化）
算法有很多很多很多很多……第三步，灰度图的二值化。

我下载了一个软件，上面列举了n种二值化的方法



每一种方法都有优缺点，没有一种完美的解决方案。我自己做了灰度平均值、百分比阈值和双峰波谷最小值等几个算法，根据我的实验效果，最后选择了双峰波谷最小值法。

这种算法是怎么样工作的呢？等我慢慢道来。
我们之前已经得到了灰度图，他的RGB值：t=r=g=b。这样我们就可以将RGB(r,g,b)值合并，用一个t表示。最终简化成用1个Byte(8bits)来表示每一个像素的值，每个像素的值就会落在[0, 255]这样一个闭区间上，如果我们用16进制表示，就是[00, ff]这样一个区间。如果用放大镜放大一个10*4个像素的图片，就会像这样：

00 00 00 00 00 00 00 00 00 00
ee 00 ee dd 4f 29 30 00 00 00
ff 10 32 ee 40 00 00 00 00 00
00 00 00 00 00 00 00 00 00 00

好了，我们看看，值为0的个数C(0)=29个, C(ee)=3, C(dd)=1, C(4f)=1, C(29)=1, C(30)=1, C(32)=1……
于是乎，如果我们统计完我们实验那张图片的0~255每个值的个数，会得到怎么样的一个结果呢？



用上述的方法，我把之前处理的那个灰度图片的灰度值放到二维平面上，x轴表示0~255种色值，y轴表示每个色值的个数。仔细看，是否很容易看出有两个波峰。这两个波峰，就是这张灰度图片上最重要的两个色值：前景色+背景色。

一般来讲，在文本照片的case里，我们会认为背景色的数值会比前景色多很多，所以较高的波峰，我们就认为是背景色，而低的那个呢，我们认为是前景色。在非文本的很多情况下，有可能出现多个波峰，这个时候，前景色有可能是多个色调，这种case就先不在这里讨论了。

好啦，有这样一个数值投影，我们只要能找出前景色和背景色，就很好识别哪些是文字，哪些是背景了，对吧。从而，我们只要把前景标志为1，背景标志为0。我们就可以把一张w*h像素的彩色图变成一个w*h的位图。我们再在这张位图上做算法，就轻松太多了。接下来的工作，就是怎么样用算法来找到前景色和背景色。

我们肉眼很容易看出，在x=18和x=135两个点附近是两个波峰，那里对应的就是我们的前景和背景。不过，对于我们的程序来讲，还不是那么容易。我们需要再用算法来处理一下，让程序能很容易的辨认出来。

我们用程序怎么判断一个点是波峰呢？就是他旁边的两个点值比他小，对不对。那旁边的两个点比他小，他就一定是波峰嘛？很明显不是。比如我们上面的统计图，很多毛刺的点，他们不是波峰，但是比周围的点要大。那有没有一种比较好的算法能快速的找到波峰呢？

其中有一种简单粗暴但有效的方法，就是迭代平滑：每个点a = (a[i-1] + a + a[i+1]) / 3（当然，首尾两个点单独处理），如此反复，至到找到只有两个点（如果多个连续点值相同，则看成是一个点）比旁边的点要大，或者最多执行K次（比如100次）。

我们来想想这个逻辑，我们不断用旁边点的值来修正一个点，那经过多次以后，这个点的值就会趋近于周围两个点。如果是一个突兀点，比如是一个高点，多次平均以后，一定和周围两个点的值相当，极限情况就是这几个点相等，对吧。



这就是我们迭代平滑以后的点，看起来是不是如丝般顺滑啊，哈哈哈。
当然，如果迭代K次以后，也找不到这样两个点的话，我们就只能做个兼容方案：先找到最高点，然后再找距离这个点左右各p个点以外的次高点。我们就认为这两个点是前景和背景。当然，这个并不能证明他们就是，只是觉得他们最可能是。这个就没有绝对的好，只能做技术上的折中。这个时候就是做实验调参数了。

好了，有了波峰以后，我们总要给前背景做个区分，也就是，从那个点分开，把贴近背景的点认为都是背景，把贴近前景的点，认为都是前景。这个时候，我们就选择了两个波峰中间的波谷。（也有算法选择他们之间的平均值）。具体到这个case，我们很容易就选择到了62号点附近。



这样，小于62的点，都是前景色，其余的都是背景色。换句话说，也就是灰度图像上，gray=r=g=b中值小于62的，都是前景色，我们把他们标识为1，认为是黑色。其余的都是0，认为是白色。看看效果吧：



怎么样，是不是感觉一下就清爽了呢？
这样，我们就把一张彩色图，变成了黑白图。
现在，我们的灰度像素图，就变成了类似这样的效果：

0 0 0 0 0 0 0 0 0 0
1 0 1 1 1 1 1 0 0 0
1 0 1 1 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0

完全就是我们熟悉的二进制的位图，专业俗称bitmap。哈哈哈哈~

好了，二值化做完了，接下来，我们需要做的，就是对黑白图片上的一些干扰点进行优化，去掉这些干扰点（俗称：噪点）。这个过程也叫去噪。第四步，去噪点。
我们为什么要去掉噪点呢？我们把之前二值化以后的图具备放大：


大家可以看红色剪头所指，有很多零星的黑点。就像美女脸上出现了小黑癍，非常影响我们对美的追求一样，会极大干扰到我们程序对于图片的切割和识别。于是乎，我们要尽我们一切可能，把这些黑斑，去掉！！

常用的去噪方法很多很多。
最简单的，即是大家在学算法数据结构中学到的DFS或者BFS（深度和广度搜索）。我们对w*h的位图先搜索所有联通的区域（值为1的，我们看起来是黑色的，连接起来的区域）。所有联通区域算一个平均的像素值，如果某些联通区域的像素值远远低于这个平均值，我们就认为是噪点。然后用0代替他。

还有一些高级的算法，比如高斯去噪、椒盐去噪等，用的是每个点上下左右8个点的平均值或者是求和以后的对比值来替代这个点，多次迭代来去噪。详细的算法可以看看相关论文，也不是特别复杂。鉴于篇幅就只提到这里。

去噪如果做的太厉害，就容易误伤，把正常点当噪点去掉了（所谓的腐蚀），所以要注意取得一个平衡。

我的算法里，上述方法都做了实验，最后选择了bfs去噪的方法。大家看看效果如下：



上面那些噪点基本上都被清理掉了。就像美女涂了美白的护肤品一样，爽~

好了，对于图像本身的清洗处理，我们基本上做的差不多了。
接下来，我们就要开始准备开始对图像进行切割了。洗好的鸭子，终于要上菜板了~第五步，旋转调平。
对于用户而言，拍照的时候不可能绝对的水平，所以，我们需要通过程序将图像做旋转处理，来找一个认为最可能水平的位置，这样切出来的图，才有可能是最好的一个效果。

那我们怎么样评估一个旋转的角度是一个好的效果呢？

我们假定调整了一个角度alpha，如果把所有点向左投影，如果该行都是0，则计数加一。这样，我们统计累加以后，找到调整角度以后，计数最大的那个角度。直白的说，就是，调整角度alpha，如果使得空行越宽越明显，这样的调整就是好的。

但是，由于旋转操作是在做坐标变换，是一个O(n^2)的算法，所以开销很大，我们的调整最好是在一个小范围内做调整，比如：-5°~ +5°之间，按0.1°为最小单位做调整。这样只需要100次，我们就可以找到一个相对比较满意的值。

具体旋转的算法，可以自己用坐标变换来实现，也可以用各个语言提供的库函数来做。我偷懒，用了java的系统库函数，嘿嘿~

看看我们调整以后的效果：


我们放一个对比图，因为调整角度比较小，所有要仔细看哦~



好了，图像调整的水平了，我们就可以对图像进行切割了。所以接下来，我们就先水平切割图像，然后再对每一行进行垂直切割。最终产出一个个字符。第六步，水平切割。
大家如果有写过日记的话，就很清楚的感觉到，写日记的时候，日记本的每一行都有一条水平线，用来保证我们写的字的水平，对吧~ 现在我们就是要沿着每一条水平线，把我们的文字用剪刀剪成一行一行的。这就是水平切割。

还是老规矩，好不好，先看疗效：


这是我的程序，对二值化、去噪和旋转调平以后的图像做的水平切割的效果。没一行的上边缘画了一条实线，下边缘画了一条虚线。在程序上，就是对应行号被标记为一个水平区块的开始和结束。

那具体是怎么实现的呢？来吧，老王带你继续往下走。

首先，我们先在重复一下我们现在已经有的一个数据结构，是一张类似以下效果的w*h的位图：

0 0 0 0 0 0 0 0 0 0
1 0 1 1 1 1 1 0 0 0
1 0 1 1 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0

接下来，我们将我们处理完的黑白图片的位图往y轴上投影，将所有值进行累加，这样就能得到一个在y轴上的曲线（或直方图）。



大家应该感觉到了吧，没一行值大的地方，就是前景色多的地方，值小的地方，就基本都是背景色。好了，这样就好办了。我们按照之前的方案，先做平滑，然后找波谷，从波谷切分。



以上就是平滑以后的效果，是不是看着就爽很多了~ ^_^

然后我们就按之前的办法，从波谷切分，这样就得到一块一块的（鉴于篇幅，我就不再画图了哈~）。虽然有了这一块一块的，但是这一块块的东西还含有大部分的背景，我们需要将他们进行压缩。直到每一块的上边缘线和下边缘线紧贴我们的文本。

怎么搞？其实也很简单。我们将每一块的投影值求一个平均，如果某一个点的值远远低于这个平均值，则认为他是背景。这里就用一个参数来调整。我这里取值如下：
final double THRESHOLD = 0.5;
final double avg = Math.min((total / lastTroughIds.length) * THRESHOLD, 10);

只要投影值小于这个avg的，我们就把他当做背景。这样，我们就将每一块的背景行去掉了。

这样是不是就结束了？ No No No……

有一种case是这样的：i jump
可以看到，i j特别多的这种，有可能上面那个点被单独分隔成一行了，对不对。我们需要对前后比较小的区块进行合并，然后让他们形成一个整体。

做完这一些工作以后，基本上行就被划开了（实际上还有很多细节工作要做，这里就不赘述了。如果有兴趣，我以后可以开源我的代码~）

水平切开了以后，我们对于图像的处理就完成90%了，最后就是垂直切分，把他们切成一个个单独的字符块。第七步，垂直切割。
紧接上面，我们将得到的水平的切割行，进行垂直的切割处理。先看效果：


那垂直切割和水平切割有什么不一样嘛？有一点不一样：同一行的两个字符往往挨的比较紧，有些时候会出现垂直方向上的重叠（比如：有些字体的Tj就会出现重叠），投影以后也不好切割，从而造成切割的时候出错。就是这一点，使得我们的垂直切割比水平切割更难。

因此我在处理的时候，做了一些特殊的工作。老王先计算一下，这一行的所有字符大体的平均宽度，按道理，这一行的字符都该差不多宽（也有个别例外，但是按照2-8定律，我们处理好大多数的情况，有利于我们简化问题的复杂度）。这样，如果粘连的话，我们按照平均宽度的一个范围，就大体上可以将他们在某一个薄弱的地方切割开。

那这些特殊的工作是怎么做的呢？别急，待老王慢慢道来。

首先，我们可以看到绝大多数情况，字符还是基本独立的。所以先把能连接的点，先连接起来，形成独立的字符区块。如果即使有粘连，也没关系，我们留到后面来处理。要求位图连通区块，有很多算法，我们这里就再次用到bfs（这些经典的算法真是屡试不爽），将图的连通。比如：


这个图用bfs就可以跑出两个大的连通区块，左边r部分和右边e的部分。

是不是做完这一步就好了呢？当然不是。有一些字符还要做上下连通区域的合并。比如：


大家可以看到类似i、j这种字符，他们是分成上下两个部分的，如果我们要识别他们，肯定是不能将他们拆分开的。而bfs算法又没办法将他们连通起来，怎么办呢？
我们将bfs产生出来的所有区块往x轴上投影，如果出现上下重叠覆盖较多的情况，我们就将他们做合并形成一个新的合并后的区块，认为他们就是连通的。

有了这样一个个的区块，我们就很好处理了。接着，我们把这些区块算取他们的平均宽度。如果有些区块宽度特别宽，比如超出平均宽度2-3倍，我们认为有可能是两个或者多个字符粘连在一起（比如有些字体的rm这两个单词就很容易拍照出来形成粘连），就可以在最薄弱的地方将他们切开，形成两个或多个独立的区块；而有一些连续的区块，每一个的宽度都特别小（只有平均宽度的几分之一），并且他们的间隔也特别小（平均间隔的几分之一），我们就认为有可能他们原先是一个字符，但是在去噪的过程中被分开了（比如经常看到h、n这样的字符，中间的那一块特别薄，在拍的不是很清楚的情况下，去噪的时候被去掉了），我们就把这些区块合并成一个区块。

切分&合并完以后，我们一个个独立的区块，就是我们想要的一个个待识别的字符图案了。前面做了这么多的工作，就是为了得到他们。

怎么样，老王说的还清楚嘛？
接下来的工作，就是对这些一个个独立的图案区块做识别。

好了，这上半部分已经快7000个字了，老王已经鏖战几个深夜了。如果大家想继续读完下半部分，请人肉执行完以下代码：

void next()
{
大家可以关注老王的微信公众号：simplemain

通过该公众号可以关注老王最近写的技术干货，也可以提问题一起探讨。
不愿意打字盆友们，可以长按一下二维码关注哈~



}

    关注 SimpleMain