借@阿里巴巴耍了个帅——HTML5 JavaScript实现图片文字识别与提取

zoukankan html css js c++ java

借@阿里巴巴耍了个帅——HTML5 JavaScript实现图片文字识别与提取
写在前面

8月底的时候，@阿里巴巴推出了一款名为“拯救斯诺克”的闯关游戏，作为前端校园招聘的热身，做的相当不错，让我非常喜欢。后来又传出了一条消息，阿里推出了A-star（阿里星）计划，入职阿里的技术培训生，将接受CTO等技术大牛的封闭培训，并被安排到最有挑战的项目中，由技术带头人担任主管。于是那几天关注了一下阿里巴巴的消息，结果看到这么一条微博（http://e.weibo.com/1897953162/A79Lpcvhi）：

此刻，@阿里足球队可爱的队员们已经出征北上。临走前，后防线的队员们留下一段亲切的问候，送给对手，看@新浪足球队的前锋们如何破解。@袁甲 @蓝耀栋 #阿里新浪足球世纪大战#

目测是一段Base64加密过的信息，但无奈的是这段信息是写在图片里的，我想看到解密后的内容难道还一个字一个字地打出来？这么懒这么怕麻烦的我肯定不会这么做啦→_→想到之前有看到过一篇关于HTML5实现验证码识别的文章，于是顿时觉得也应该动手尝试一下，这才是极客的风范嘛！

Demo与截图

先来一个大家最喜欢的Demo地址（识别过程需要一定时间，请耐心等待，识别结果请按F12打开Console控制台查看）：

http://www.clanfei.com/demos/recognition/

再来张效果图：

思路

实现一个算法，思路是最重要的，而实现不过是把思想转化为能够运行的代码。

简单地说，要进行文本识别，自然是拿图片的数据与文字的图形数据进行对比，找到与图片数据匹配程度最高的字符。

首先，先确定图片中文本所用的字体、字号、行距等信息，打开PhotoShop，确定了字体为微软雅黑，16像素，行距为24，Base64文字的开始坐标为(8, 161)。

然后，确定要进行匹配的字库，Base64编码中可能出现的字符为26个字母大小写、10个数字、加号、斜杠，但目测在图片中没有斜杠出现，因此字库应该为：

0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+

接着，是确定如何判断字符是否匹配，由于只需要对字型进行匹配，因此颜色值对算法并无用处，因此将其灰度化（详见百度百科），并使用01数组表示，1代表该像素点落在此字符图形上，0反之，而如何确定该某个灰度值在数组中应该表示为0还是1，这个转换公式更是算法中的关键。

最后，将字型的灰度化数据与图片中文字部分的灰度化数据进行对比，将误差最小的字型作为匹配到的字符，然后进行下一个字符的匹配，直到图片中所有字符匹配完毕为止。

递归实现

详细的思路于代码注释中，个人觉得这样结合上下文更为容易理解（注：代码应运行于服务器环境，否则会出现跨域错误，代码行数虽多，但注释就占了大半，有兴趣可以耐心看完，图片资源于上方“写在前面”）。
1. <!doctype html>
2. <html lang="zh-CN">
3. <head>
4. <meta charset="UTF-8">
5. <title>文字识别</title>
6. </head>
7. <body>
8. <canvas id="canvas" width="880" height="1500"></canvas>
9. <script type="text/javascript">
10. var image = new Image();
11. image.onload = recognition;
12. image.src = 'image.jpg';
13. function recognition(){
14. // 开始时间，用于计算耗时
15. var beginTime = new Date().getTime();
16. // 获取画布
17. var canvas = document.getElementById('canvas');
18. // 字符库
19. var letters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+';
20. // 字型数据
21. var letterData = {};
22. // 获取context
23. var context = canvas.getContext('2d');
24. // 设置字体、字号
25. context.font = '16px 微软雅黑';
26. // 设置文字绘制基线为文字顶端
27. context.textBaseline = 'top';
28. // 一个循环获取字符库对应的字型数据
29. for(var i = 0; i < letters.length; ++i){
30. var letter = letters[i];
31. // 获取字符绘制宽度
32. var width = context.measureText(letter).width;
33. // 绘制白色背景，与图片背景对应
34. context.fillStyle = '#fff';
35. context.fillRect(0, 0, width, 22);
36. // 绘制文字，以获取字型数据
37. context.fillStyle = '#000';
38. context.fillText(letter, 0, 0);
39. // 缓存字型灰度化0-1数据
40. letterData[letter] = {
41. width : width,
42. data : getBinary(context.getImageData(0, 0, width, 22).data)
43. }
44. // 清空该区域以获取下个字符字型数据
45. context.clearRect(0, 0, width, 22);
46. }
47. // console.log(letterData);
49. // 绘制图片
50. context.drawImage(this, 0, 0);
51. // 要识别的文字开始坐标
52. var x = beginX = 8;
53. var y = beginY = 161;
54. // 行高
55. var lineHeight = 24;
56. // 递归次数
57. var count = 0;
58. // 结果文本
59. var result = '';
61. // 递归开始
62. findLetter(beginX, beginY, '');
63. // 递归函数
64. function findLetter(x, y, str){
65. // 找到结果文本，则递归结束
66. if(result){
67. return;
68. }
69. // 递归次数自增1
70. ++ count;
71. // console.log(str);
72. // 队列，用于储存可能匹配的字符
73. var queue = [];
74. // 循环匹配字符库字型数据
75. for(var letter in letterData){
76. // 获取当前字符宽度
77. var width = letterData[letter].width;
78. // 获取该矩形区域下的灰度化0-1数据
79. var data = getBinary(context.getImageData(x, y, width, 22).data);
80. // 当前字符灰度化数据与当前矩形区域下灰度化数据的偏差量
81. var deviation = 0;
82. // 一个临时变量以确定是否到了行末
83. var isEmpty = true;
84. // 如果当前矩形区域已经超出图片宽度，则进行下一个字符匹配
85. if(x + width > 440){
86. continue;
87. }
88. // 计算偏差
89. for(var i = 0, l = data.length; i < l; ++i){
90. // 如果发现存在的有效像素点，则确定未到行末
91. if(isEmpty && data[i]){
92. isEmpty = false;
93. }
94. // 不匹配的像素点，偏差量自增1
95. if(data[i] != letterData[letter].data[i]){
96. ++deviation;
97. }
98. }
99. // 由于调试时是在猎豹浏览器下进行的，而不同浏览器下的绘图API表现略有不同
100. // 考虑到用Chrome的读者应该也不少，故简单地针对Chrome对偏差进行一点手动微调
101. // （好吧，我承认我是懒得重新调整getBinary方法的灰度化、0-1化公式=_=||）
102. // 下面这段if分支在猎豹浏览器下可以删除
103. if(letter == 'F' || letter == 'E'){
104. deviation -= 6;
105. }
106. // 如果匹配完所有17行数据，则递归结束
107. if(y > beginY + lineHeight * 17){
108. result = str;
109. break;
110. }
111. // 如果已经到了行末，重置匹配坐标
112. if(isEmpty){
113. x = beginX;
114. y += lineHeight;
115. str += ' ';
116. }
117. // 如果偏差量与宽度的比值小于3，则纳入匹配队列中
118. // 这里也是算法中的关键点，怎样的偏差量可以纳入匹配队列中
119. // 刚开始是直接用绝对偏差量判断，当偏差量小于某个值的时候则匹配成功，但调试过程中发现不妥之处
120. // 字符字型较小的绝对偏差量自然也小，这样l，i等较小的字型特别容易匹配成功
121. // 因此使用偏差量与字型宽度的比值作为判断依据较为合理
122. // 而这个判断值3的确定也是难点之一，大了递归的复杂度会大为增长，小了很可能将正确的字符漏掉
123. if(deviation / width < 3){
124. queue.push({
125. letter : letter,
126. width : width,
127. deviation : deviation
128. });
129. }
130. }
131. // 如果匹配队列不为空
132. if(queue.length){
133. // 对队列进行排序，同样是根据偏差量与字符宽度的比例
134. queue.sort(compare);
135. // console.log(queue);
136. // 从队头开始进行下一个字符的匹配
137. for(var i = 0; i < queue.length && ! result; ++i){
138. var item = queue[i];
139. // 下一步递归
140. findLetter(x + item.width, y, str + item.letter);
141. }
142. }else{
143. return false;
144. }
145. }
146. // 递归结束
148. // 两个匹配到的字符的比较方法，用于排序
149. function compare(letter1, letter2){
150. return letter1.deviation / letter1.width - letter2.deviation / letter2.width;
151. }
153. // 图像数据的灰度化及0-1化
154. function getBinary(data){
155. var binaryData = [];
156. for(var i = 0, l = data.length; i < l; i += 4){
157. // 尝试过三种方式
158. // 一种是正常的灰度化公式，无论系数如何调整都无法与绘制的文字字型数据很好地匹配
159. // binaryData[i / 4] = (data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11) < 90;
160. // 一种是自己是通过自己手动调整系数，结果虽然接近但总是不尽人意
161. // binaryData[i / 4] = data[i] < 250 && data[i + 1] < 203 && data[i + 2] < 203;
162. // 最后使用了平均值，结果比较理想
163. binaryData[i / 4] = (data[i] + data[i + 1] + data[i + 2]) / 3 < 200;
164. }
165. return binaryData;
166. }
167. console.log(result);
168. // 输出耗时
169. console.log(count, (new Date().getTime() - beginTime) / 1000 + ' s');
171. // 将文字绘制到图片对应位置上，以方便查看提取是否正确
172. context.drawImage(this, this.width, 0);
173. var textArray = result.split(' ');
174. for(var i = 0; i < textArray.length; ++i){
175. context.fillText(textArray[i], this.width + beginX, beginY + lineHeight * i);
176. }
177. }
178. </script>
179. </body>
180. </html>
运行环境

Win7 64位，i3-3220 CPU 3.30 GHz，8G内存

运行结果
1. yv66vgAAADIAHQoABgAPCQAQABEIABIKABMAFAcAF
2. QcAFgEABjxpbml0PgEAAygpVgEABENvZGUB
3. AA9MaW5lTnVtYmVyVGFibGUBAARtYWluAQAWKFtMa
4. mF2YS9sYW5nL1N0cmluZzspVgEAClNvdXJj
5. ZUZpbGUBAAlNYWluLmphdmEMAAcACAcAFwwAGAA
6. ZAQBv5paw5rWq6Laz55CD6Zif5a6e5Yqb6LaF
7. 576k77yM6Zi15a656LGq5Y2O44CC5LmF5Luw5aSn5ZC
8. N77yM5ZGo5pel5LiA5oiY77yM6L+Y5pyb
9. 5LiN6YGX5L2Z5Yqb77yM5LiN5ZCd6LWQ5pWZ44CCBw
10. AaDAAbABwBAARNYWluAQAQamF2YS9sYW5n
11. L09iamVjdAEAEGphdmEvbGFuZy9TeXN0ZW0BAANvdX
12. QBABVMamF2YS9pby9QcmludFN0cmVhbTsB
13. ABNqYXZhL2lvL1ByaW50U3RyZWFtAQAHcHJpbnRsbgE
14. AFShMamF2YS9sYW5nL1N0cmluZzspVgAh
15. AAUABgAAAAAAAgABAAcACAABAAkAAAAdAAEAAQA
16. AAAUqtwABsQAAAAEACgAAAAYAAQAAAAEACQAL
17. AAwAAQAJAAAAJQACAAEAAAAJsgACEgO2AASxAAAA
18. AQAKAAAACgACAAAAAwAIAAQAAQANAAAAAgAO
20. 715 1.984 s（猎豹）
21. 772 15.52 s（Chrome）
（递归次数谷歌只比猎豹多几十，耗时却对了十几秒，看来猎豹真的比Chrome快？）

非递归实现

其实非递归实现只是递归实现前做的一点小尝试，只在猎豹下调试完成，因为不舍得删，所以顺便贴出来了，使用Chrome的各位就不要跑了（我真的不是在给猎豹做广告= =||）。
1. <!doctype html>
2. <html lang="zh-CN">
3. <head>
4. <meta charset="UTF-8">
5. <title>文字识别</title>
6. </head>
7. <body>
8. <canvas id="canvas" width="880" height="1500"></canvas>
9. <script type="text/javascript">
10. var image = new Image();
11. image.onload = recognition;
12. image.src = 'image.jpg';
13. function recognition(){
14. // 开始时间，用于计算耗时
15. var beginTime = new Date().getTime();
16. // 获取画布
17. var canvas = document.getElementById('canvas');
18. // 字符库
19. var letters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+';
20. // 字型数据
21. var letterData = {};
22. // 获取context
23. var context = canvas.getContext('2d');
24. // 设置字体、字号
25. context.font = '16px 微软雅黑';
26. // 设置文字绘制基线为文字顶端
27. context.textBaseline = 'top';
28. // 一个循环获取字符库对应的字型数据
29. for(var i = 0; i < letters.length; ++i){
30. var letter = letters[i];
31. // 获取字符绘制宽度
32. var width = context.measureText(letter).width;
33. // 绘制白色背景，与图片背景对应
34. context.fillStyle = '#fff';
35. context.fillRect(0, 0, width, 22);
36. // 绘制文字，以获取字型数据
37. context.fillStyle = '#000';
38. context.fillText(letter, 0, 0);
39. // 缓存字型灰度化0-1数据
40. letterData[letter] = {
41. width : width,
42. data : getBinary(context.getImageData(0, 0, width, 22).data)
43. }
44. // 清空该区域以获取下个字符字型数据
45. context.clearRect(0, 0, width, 22);
46. }
47. // console.log(letterData);
49. // 绘制图片
50. context.drawImage(this, 0, 0);
51. // 要识别的文字开始坐标
52. var x = beginX = 8;
53. var y = beginY = 161;
54. // 行高
55. var lineHeight = 24;
56. // 结果文本
57. var result = '';
59. // 非递归开始
60. var count = 0;
61. while(y <= 569 && ++count < 1000){
62. // 当前最匹配的字符
63. var trueLetter = {letter: null, width : null, deviation: 100};
64. // 循环匹配字符
65. for(var letter in letterData){
66. // 获取当前字符宽度
67. var width = letterData[letter].width;
68. // 获取该矩形区域下的灰度化0-1数据
69. var data = getBinary(context.getImageData(x, y, width, 22).data);
70. // 当前字符灰度化数据与当前矩形区域下灰度化数据的偏差量
71. var deviation = 0;
72. // 一个临时变量以确定是否到了行末
73. var isEmpty = true;
74. // 如果当前矩形区域已经超出图片宽度，则进行下一个字符匹配
75. if(x + width > this.width){
76. continue;
77. }
78. // 计算偏差
79. for(var i = 0, l = data.length; i < l; ++i){
80. // 如果发现存在的有效像素点，则确定未到行末
81. if(isEmpty && data[i]){
82. isEmpty = false;
83. }
84. // 不匹配的像素点，偏差量自增1
85. if(data[i] != letterData[letter].data[i]){
86. ++deviation;
87. }
88. }
89. // 非递归无法遍历所有情况，因此针对某些字符进行一些微调（这里只针对猎豹，Chrome的没做）
90. // 因为其实非递归实现只是在递归实现前做的一点小尝试，因为不舍得删，就顺便贴出来了
91. if(letter == 'M'){
92. deviation -= 6;
93. }
94. // 如果偏差量与宽度的比值小于3，则视为匹配成功
95. if(deviation / width < 3){
96. // 将偏差量与宽度比值最小的作为当前最匹配的字符
97. if(deviation / width < trueLetter.deviation / trueLetter.width){
98. trueLetter.letter = letter;
99. trueLetter.width = width;
100. trueLetter.deviation = deviation;
101. }
102. }
103. }
104. // 如果已经到了行末，重置匹配坐标，进行下一轮匹配
105. if(isEmpty){
106. x = beginX;
107. y += lineHeight;
108. result += ' ';
109. continue;
110. }
111. // 如果匹配到的字符不为空，则加入结果字符串，否则输出匹配结果
112. if(trueLetter.letter){
113. result += trueLetter.letter;
114. // console.log(x, y, trueLetter.letter);
115. }else{
116. console.log(x, y, result.length);
117. break;
118. }
119. // 调整坐标至下一个字符匹配位置
120. x += trueLetter.width;
121. }
122. // 非递归结束
124. // 图像数据的灰度化及0-1化
125. function getBinary(data){
126. var binaryData = [];
127. for(var i = 0, l = data.length; i < l; i += 4){
128. // 尝试过三种方式
129. // 一种是正常的灰度化公式，无论系数如何调整都无法与绘制的文字字型数据很好地匹配
130. // binaryData[i / 4] = (data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11) < 90;
131. // 一种是自己是通过自己手动调整系数，结果虽然接近但总是不尽人意
132. // binaryData[i / 4] = data[i] < 250 && data[i + 1] < 203 && data[i + 2] < 203;
133. // 最后使用了平均值，结果比较理想
134. binaryData[i / 4] = (data[i] + data[i + 1] + data[i + 2]) / 3 < 200;
135. }
136. return binaryData;
137. }
138. console.log(result);
139. // 输出耗时
140. console.log(count, (new Date().getTime() - beginTime) / 1000 + ' s');
142. // 将文字绘制到图片对应位置上，以方便查看提取是否正确
143. context.drawImage(this, this.width, 0);
144. var textArray = result.split(' ');
145. for(var i = 0; i < textArray.length; ++i){
146. context.fillText(textArray[i], this.width + beginX, beginY + lineHeight * i);
147. }
148. }
149. </script>
150. </body>
151. </html>
运行结果
1. yv66vgAAADIAHQoABgAPCQAQABEIABIKABMAFAcAF
2. QcAFgEABjxpbml0PgEAAygpVgEABENvZGUB
3. AA9MaW5lTnVtYmVyVGFibGUBAARtYWluAQAWKFtMa
4. mF2YS9sYW5nL1N0cmluZzspVgEAClNvdXJj
5. ZUZpbGUBAAlNYWluLmphdmEMAAcACAcAFwwAGAA
6. ZAQBv5paw5rWq6Laz55CD6Zif5a6e5Yqb6LaF
7. 576k77yM6Zi15a656LGq5Y2O44CC5LmF5Luw5aSn5ZC
8. N77yM5ZGo5pel5LiA5oiY77yM6L+Y5pyb
9. 5LiN6YGX5L2Z5Yqb77yM5LiN5ZCd6LWQ5pWZ44CCBw
10. AaDAAbABwBAARNYWluAQAQamF2YS9sYW5n
11. L09iamVjdAEAEGphdmEvbGFuZy9TeXN0ZW0BAANvdX
12. QBABVMamF2YS9pby9QcmludFN0cmVhbTsB
13. ABNqYXZhL2lvL1ByaW50U3RyZWFtAQAHcHJpbnRsbgE
14. AFShMamF2YS9sYW5nL1N0cmluZzspVgAh
15. AAUABgAAAAAAAgABAAcACAABAAkAAAAdAAEAAQA
16. AAAUqtwABsQAAAAEACgAAAAYAAQAAAAEACQAL
17. AAwAAQAJAAAAJQACAAEAAAAJsgACEgO2AASxAAAA
18. AQAKAAAACgACAAAAAwAIAAQAAQANAAAAAgAO
20. 702 1.931 s（猎豹）
真正的结果

找了个在线的Base64解码工具将上面的提取结果进行了一下解码，发现是一个Java编译后的.class文件，大概内容是：“新浪足球队实力超群，阵容豪华。久仰大名，周日一战，还望不遗余力，不吝赐教。”

写在最后

这个只是一个最浅层次的文字识别提取算法，不够通用，性能也一般，权当兴趣研究之用，不过我想，勇于实践、敢于尝试的精神才是最重要的。。

因为最近实习工作略忙，再加上学校开学事情也多，拖了两个星期才把这边文章写出来，除此之外还有不少计划都落下了，还得继续努力啊>_<

还有最近的一些思考的结果和感触也要找个时间写下来。

PS：写这篇博客的时候精神略差，之后有想到什么再作补充吧，如果写的不好还请多多指教！

=======================签名档=======================
原文地址（我的博客）：http://www.clanfei.com/2013/09/1723.html
欢迎访问交流，至于我为什么要多弄一个博客，因为我热爱前端，热爱网页，我更希望有一个更加自由、真正属于我自己的小站，或许并不是那么有名气，但至少能够让我为了它而加倍努力。。
=======================签名档=======================
查看全文

相关阅读:
.Net反编译实战
 PHP Yii框架开发——组织架构网站重构
 JS数据绑定模板artTemplate试用
 C# LDAP 管理（创建新用户）
Ajax跨域请求数据实例（JSOPN方式）
【AWK】：常用总结
 【Spark调优】：RDD持久化策略
 【ElasticSearch】：QueryDSL
【ElasticSearch】：Mapping相关
 【ElasticSearch】：索引Index、文档Document、字段Field

原文地址：https://www.cnblogs.com/pangblog/p/3327618.html

借@阿里巴巴 耍了个帅——HTML5 JavaScript实现图片文字识别与提取

写在前面

Demo与截图

思路

递归实现

运行环境

运行结果

非递归实现

运行结果

真正的结果

写在最后

借@阿里巴巴耍了个帅——HTML5 JavaScript实现图片文字识别与提取