我搞坏了我儿子的“牛听听”
邓松岳约 10 分钟我搞坏了我儿子的“牛听听”，搞坏东西就得赔。
我是一个的中年程序员，我有一个六岁的儿子。我每天的主要生活，除了写代码，还需要经常和我的儿子斗智斗勇。记忆中，我小时候，都是作为儿子的我在闯祸，而我爸在收拾我。可是，终于熬到了我成为了爸爸，时代却改变了，新时代的亲子关系，是平等的，甚至很多时候，需要大人降低姿态来包容孩子。于是，在我和我儿子的对线中，悲剧重演了。再次变成了，我，在不停闯祸，而我的儿子，在替我爸收拾我。
于是，这一天，我又闯祸了。
——我搞坏了我儿子的“牛听听”
啥是“牛听听”
中年油腻的程序员，购物在猫狗之间，自然是选择狗东的。不过这不重要。我熟练的打开了京东，搜索“牛听听”，进入商品页面。商品首页上醒目的位置有这么两张图片。
第一张图上的小女孩，旁边就摆着这个叫做“牛听听”的道具，以至于她甚至可以一边学习，一边快乐的欢笑，仿佛马上就要说出那句著名的广告语“哪里不会点哪里”。
而第二张图片，简单直接的描绘了“牛听听”的用法，它可以扫描摆在它面前的书，并且把书里的内容“读”出来。
是的，这又是一个“科技解放父母的双手”的神器，作为被解放的父母，有了它，就可以减少很多帮助不识字的孩子读绘本的时间支出。有了它，想必，多出来的时间，一定自己又可以多玩不少手机吧，不过这也不重要。
重要的是，我儿子的“牛听听”，它被我搞坏了。
怎么它就坏了呢
它被我的手机充电器充过一次电以后，就再也不能开机了。我想当然的认为，充电口都是Type-C，既然插得进去，电自然就充得了。可是，它就是这么坏了，坏得透透的。
心怀一丝希望的我，接通了“牛听听”的真人客服，客服告诉我，虽然都是Type-C，但是手机快充头的输出电流太高了，把设备烧坏了。并且，这个属于人为损坏，而且本身我的这个牛听听就已经过了保修期了，她没有办法可以免费帮到我。
再买一个？
看来，只能认栽了。于是，我再次打开了购物网站的商品页，准备以身作则的履行“弄坏东西就得赔”的教诲。但是，我又一次被“牛听听”惊到了。
这玩意儿，原来，这么贵啊。
广告里都说什么爸爸少抽一包烟，妈妈少买一件化妆品。这，可不止一包烟呢…
就当我准备忍痛下单的时候，我那该死的工程师之魂，终于醒过来了。
等一等！
它，复杂吗？
它，不就是能识别书里面的文字，并且用声音把文字念出来吗？这功能，怎么听着挺耳熟的呢？
我过去开发了搜狐新闻的手机端AI框架，里面OCR文字识别模块是现成的轮子，可以直接拿来用。
而文字转语音的部分，那也是我的老本行啊，搜狐新闻的听新闻功能也是我们开发的。
于是，万事俱备，我准备自己动手写一个，“手机版”的“牛听听”。
干货
先回顾一下搜狐双擎AI框架的实现：
搜狐双擎AI框架的文章：https://blog.csdn.net/SOHU_TECH/article/details/112975827
集成这个sdk之后，只用简单几行代码，就可以实现从Bitmap到String的转化过程：
AIHelperFactory.getInstance(context).init(AI_TOOL_OCR);
...
AIHelperFactory.getInstance(context).getOcr().recognize(bitmap);
…
AIHelperFactory.getInstance(context).release();
中间模型加载选型已经对开发者完全透明了，非常好用，不亏是我自己写的轮子。
5分钟集成完毕，我打印了李白的《静夜思》，随手拍了张照片，丢给demo程序单元测试一下效果：
嗯，仔细一看，不对劲？识别成了：
夜思陲
李白
麻前明月光
疑似地上霜
举头望明月
低夫照おり
翻车了…
问题出在哪里？
对比了成熟商用的扫描文档软件，看了看他门的广告图片，我发现了一个问题：
他门图片都是正面直出。随手拍摄的图片，也会有自动识别并且拉伸变形：
看来，需要在OCR识别之前，加入这么几个预处理：
自动识别图片中四边形
辨认四边形是否具备纸张的特性
提取四边形内容，变形
锐化清晰文本
手机版牛听听的技术选型，从OCR+TTS变成了“纸张识别预处理”+OCR+TTS:
OCR+TTS使用现成的轮子完成。问题简化成了下面这张示意图，从左图自动提取右图的过程。
OpenCV实现提取照片中的纸张
图像到图像的处理，当仁不让的，这次，我选择了OpenCV。
OpenCV的强大工具类Imgproc提供了一系列的图形处理方法，仔细看每个方法的说明，总能找到实现自己想要功能的思路。
这次，我使用了里面4个方法，轻而易举的就完成了提取纸张的功能：
第一步：findContours
提取图像中的轮廓
Finds contours in a binary image.
* The function retrieves contours from the binary image using the algorithm CITE: Suzuki85 . The contours are a useful tool for shape analysis and object detection and recognition.
如方法说明，这个方法可以输出图像中的轮廓Mat，对上面的照片使用此方法后，大概可以得到下图：
第二步：approxPolyDP
提取轮廓中的多边形，使用“道格拉斯-普克算法”提取多边形
Approximates a polygonal curve(s) with the specified precision. * The function cv::approxPolyDP approximates a curve or a polygon with another curve/polygon with less vertices so that the distance between them is less or equal to the specified precision.
这个算法非常巧妙的把我们前一步提取到的轮廓，通过抽样概括成了多边形。
“道格拉斯-普克算法(Douglas–Peucker algorithm，亦称为拉默-道格拉斯-普克算法、迭代适应点算法、分裂与合并算法)是将曲线近似表示为一系列点，并减少点的数量的一种算法。它的优点是具有平移和旋转不变性，给定曲线与阈值后，抽样结果一定。”
我选择的采样阈值是多边形周长的2%，这样得到的近似多边形中，只留下四边形之后是这样，只留下了红绿两个四边形：
第三步：contourArea
保证四边形为主四边形
Calculates a contour area.
The function computes a contour area. Similarly to moments , the area is computed using the Green formula. Thus, the returned area and the number of non-zero pixels.
通过计算四边形的面积，当面积达到一定量，才可以足够呈现里面的文本内容。
这一步，在这个测试case中，因为两个四边形都足够大，所以没有过滤出结果。
第四步：isContourConvex
保证四边形形状像一个纸张（外凸四边形）
Tests a contour convexity.
The function tests whether the input contour is convex or not. The contour must be simple, that is, without self-intersections. Otherwise, the function output is undefined.
过滤掉红色的内凹四边形之后，剩下唯一的结果：
大功告成！
来回归一下核心几步的代码实现：
getPaperBitmapWithDefaultRect方法获取图片中的纸张图片
public static Bitmap getPaperBitmapWithDefaultRect(Context context,Uri srcUri, RectF defaultRect) {// 1. Resize the srcBitmap to a smaller recognizeMat for performance// optimization.Bitmap recognizeBitmap = ImageUtils.getBitmapWithoutOrientation(context, srcUri, PAPER_RECOGNIZE_WIDTH);Mat recognizeMat = new Mat(recognizeBitmap.getHeight(),recognizeBitmap.getWidth(), CvType.CV_8UC3);try {Utils.bitmapToMat(recognizeBitmap, recognizeMat);} catch (org.opencv.core.CvException e) {return null;} catch (IllegalArgumentException e) {return null;}if (recognizeMat.empty()) {return null;}// 2. Find the paper edge in the recoginzeMatMatOfPoint recognizeCorners = find_largest_square(find_squares(recognizeMat));// 3. Get paper edge in the srcMat from paper edge in the recognizeMatInputStream input = null;try {input = context.getContentResolver().openInputStream(srcUri);} catch (FileNotFoundException e) {e.printStackTrace();return null;}BitmapFactory.Options opts = new BitmapFactory.Options();opts.inJustDecodeBounds = true;BitmapFactory.decodeStream(input, null, opts);String filePath = ImageUtils.getImagePathFromUri(context, srcUri);Mat srcMat = Imgcodecs.imread(filePath);boolean needRotate = false;if (srcMat.width() > srcMat.height()) {needRotate = true;}Point[] recognizePoints;if (recognizeCorners == null) {recognizePoints = new Point[4];int defaultWidth = needRotate ? srcMat.height(): srcMat.width();int defaultHeight = needRotate ? srcMat.width(): srcMat.height();if (needRotate) {recognizePoints[0] = new Point(defaultHeight * defaultRect.top,defaultWidth * (1 - defaultRect.right));recognizePoints[1] = new Point(defaultHeight* defaultRect.bottom, defaultWidth* (1 - defaultRect.right));recognizePoints[2] = new Point(defaultHeight* defaultRect.bottom, defaultWidth* (1 - defaultRect.left));recognizePoints[3] = new Point(defaultHeight * defaultRect.top,defaultWidth * (1 - defaultRect.left));} else {recognizePoints[0] = new Point(defaultWidth * defaultRect.left,defaultHeight * defaultRect.top);recognizePoints[1] = new Point(defaultWidth * defaultRect.right, defaultHeight* defaultRect.top);recognizePoints[2] = new Point(defaultWidth * defaultRect.right, defaultHeight* defaultRect.bottom);recognizePoints[3] = new Point(defaultWidth * defaultRect.left,defaultHeight * defaultRect.bottom);}} else {float scale = 1;scale = (float) recognizeBitmap.getWidth() / opts.outWidth;recognizePoints = recognizeCorners.toArray();for (Point pt : recognizePoints) {pt.x /= scale;pt.y /= scale;}}MatOfPoint srcCorners = new MatOfPoint(recognizePoints);if (needRotate) {srcCorners = sortRotateCorners(srcCorners);} else {srcCorners = sortCorners(srcCorners);}// 4. Get the transfer mat from the paper edgeMatOfPoint2f quad_pts = new MatOfPoint2f();int padding = PAPER_PADDING;Mat quad = Mat.zeros(PAPER_SIZE_HEIGHT, PAPER_SIZE_WIDTH,CvType.CV_8UC3);Size size = quad.size();quad_pts.push_back(new MatOfPoint2f(new Point(-padding, -padding)));quad_pts.push_back(new MatOfPoint2f(new Point(size.width + padding,-padding)));quad_pts.push_back(new MatOfPoint2f(new Point(size.width + padding,size.height + padding)));quad_pts.push_back(new MatOfPoint2f(new Point(-padding, size.height+ padding)));srcCorners.convertTo(srcCorners, CvType.CV_32F);Mat transmtx = Imgproc.getPerspectiveTransform(srcCorners, quad_pts);// 5. Transfer the paper in srcMatImgproc.warpPerspective(srcMat, quad, transmtx, quad.size());// 6. get paper bitmapquad = getGrayContrastMat(quad);Bitmap dstBitmap = Bitmap.createBitmap(quad.width(), quad.height(),Bitmap.Config.ARGB_8888);Utils.matToBitmap(quad, dstBitmap);if (DEBUG) {Debug.stopMethodTracing();}return dstBitmap;}
这方法里面核心得方法是find_squares
把图片的Bitmap，转换为OpenCV Mat模式。然后转为灰度图像，开始寻找四边形：
寻找四边形，使用我们前面提到的四个方法，得到纸张的四边形：
public static List<MatOfPoint> find_squares(Mat image) {List<MatOfPoint> contours = new ArrayList<MatOfPoint>();List<MatOfPoint> squares = new ArrayList<MatOfPoint>();Mat blurred = new Mat(image.height(), image.width(), CvType.CV_8UC3);Imgproc.GaussianBlur(image, blurred, new Size(11, 11), 0);ArrayList<Mat> grayList = new ArrayList<Mat>();Core.split(blurred, grayList);Mat gray0 = new Mat(blurred.size(), CvType.CV_8U);Mat gray = new Mat(image.height(), image.width(), CvType.CV_8U);for (int a = 0; a < grayList.size(); a++) {gray0 = grayList.get(a);int threshold_level = 2;for (int level = 0; level < threshold_level; level++) {Imgproc.Canny(gray0, gray, 10 * (level + 1), 10 * (level + 1));Imgproc.dilate(gray, gray, new Mat(), new Point(-1, -1), 1);Mat hierarchy = new Mat();hierarchy.convertTo(hierarchy, CvType.CV_32SC1);Imgproc.findContours(gray, contours, hierarchy, Imgproc.RETR_LIST, Imgproc.CHAIN_APPROX_SIMPLE);MatOfPoint2f approx = new MatOfPoint2f();for (MatOfPoint contoursPoint : contours) {// get each contours// convert contours to point2f// close a contours start point and end pointMatOfPoint2f contourPoint2f = new MatOfPoint2f();contoursPoint.convertTo(contourPoint2f, CvType.CV_32F);Imgproc.approxPolyDP(contourPoint2f, approx,Imgproc.arcLength(contourPoint2f, true) * 0.02,true);if (approx.total() == 4) {// convert the closed path to a MatOfPointPoint[] approxArray = approx.toArray();MatOfPoint approxPoint = new MatOfPoint(approxArray);if (Math.abs(Imgproc.contourArea(approx)) > 1000&& Imgproc.isContourConvex(approxPoint)) {double maxCosine = 0;for (int j = 2; j < 5; j++) {double cosine = Math.abs(angle(approxArray[j % 4], approxArray[j - 2],approxArray[j - 1]));maxCosine = Math.max(maxCosine, cosine);}if (maxCosine < 0.3) {squares.add(approxPoint);}}}}}}return squares;}
最后把得到的四边形区域，形变，锐化。
关于锐化图像，我们又要再次请出这位著名的“带帽子的菇凉”，相信每个程序员都在各个文档中见过她的身影：
锐化矩阵，没有比这个更有名的了：
我们稍微加大一点亮度，中心从5，改为5.5，实测这样提取文字的成功率更高：
private static Mat getGrayContrastMat(Mat srcMat) {Mat highcontrastMat = Mat.zeros(srcMat.size(), CvType.CV_32FC4);Imgproc.cvtColor(srcMat, highcontrastMat, Imgproc.COLOR_BGR2GRAY, 4);Imgproc.GaussianBlur(highcontrastMat, highcontrastMat, new Size(3, 3),0);Mat kernel = new Mat(3, 3, CvType.CV_32F, new Scalar(0));kernel.put(0, 1, -1.0);kernel.put(1, 0, -1.0);kernel.put(2, 1, -1.0);kernel.put(1, 2, -1.0);kernel.put(1, 1, 5.5);Imgproc.filter2D(highcontrastMat, highcontrastMat,highcontrastMat.depth(), kernel);return highcontrastMat;}
效果
改完之后，来看看效果视频：
效果不错，正确率100%！再提高一点难度，识别手写体的图片怎么样呢？
也几乎是全对！
再提高一点要求
如果我要动态识别摄像头回传的每一帧数据，这个方法的速度够快吗？
我添加了动态识别摄像头每一帧的数据，对识别到的四边形，加上候选框浮层，当候选框足够大的时候，自动拍照识别。并转到TTS播报。得到了最终的demo。
直接看效果：
真正的大功告成！零成本实现了软件版自动看书转读书。这牛听听，我应该不用赔了吧？我想孩子一定会非常满意，爸爸我可是很努力的写了代码呢。
最后
我是一名中年程序员，我不小心搞坏了儿子的牛听听，儿子让我赔，可是这个牛听听实在太贵了。于是，我自己动手写了一个手机软件版。
万万没想到，最后，我还是给孩子重新买了一个牛听听。
因为我忘了一个关键的问题，我儿子他
没 有 手 机…
虽然牛听听很贵，可是，现在给搜狐技术产品投稿，稿费也足够补贴我买牛听听了。于是，你看到了这篇文章。写代码的中年人，能有什么歪脑筋呢？
什么，你也想要挣稿费？那还等什么，赶紧添加搜狐技术产品的公众号，来投稿吧！