`
jishublog
  • 浏览: 868925 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

写在前面


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

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

阿里足球队

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


Demo与截图


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

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


再来张效果图：
HTML5 JavaScript实现图片文字提取


思路


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

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

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

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

0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+

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

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


递归实现


详细的思路于代码注释中，个人觉得这样结合上下文更为容易理解（注：代码应运行于服务器环境，否则会出现跨域错误，代码行数虽多，但注释就占了大半，有兴趣可以耐心看完，图片资源于上方“写在前面”）。

    

  1. 
<!doctype html>


    2. 

  2. 
<htmllang="zh-CN">


    3. 

  3. 
<head>


    4. 

  4. 
   <metacharset="UTF-8">


    5. 

  5. 
   <title>文字识别</title>


    6. 

  6. 
</head>


    7. 

  7. 
<body>


    8. 

  8. 
   <canvasid="canvas"width="880"height="1500"></canvas>


    9. 

  9. 
   <scripttype="text/javascript">


    10. 

  10. 
   varimage=newImage();


    11. 

  11. 
    image.onload=recognition;


    12. 

  12. 
    image.src='image.jpg';


    13. 

  13. 
   functionrecognition(){


    14. 

  14. 
       // 开始时间，用于计算耗时


    15. 

  15. 
       varbeginTime=newDate().getTime();


    16. 

  16. 
       // 获取画布


    17. 

  17. 
       varcanvas=document.getElementById('canvas');


    18. 

  18. 
       // 字符库


    19. 

  19. 
       varletters='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+';


    20. 

  20. 
       // 字型数据


    21. 

  21. 
       varletterData={};


    22. 

  22. 
       // 获取context


    23. 

  23. 
       varcontext=canvas.getContext('2d');


    24. 

  24. 
       // 设置字体、字号


    25. 

  25. 
        context.font='16px 微软雅黑';


    26. 

  26. 
       // 设置文字绘制基线为文字顶端


    27. 

  27. 
        context.textBaseline='top';


    28. 

  28. 
       // 一个循环获取字符库对应的字型数据


    29. 

  29. 
       for(vari=0;i<letters.length;++i){


    30. 

  30. 
           varletter=letters[i];


    31. 

  31. 
           // 获取字符绘制宽度


    32. 

  32. 
           varwidth=context.measureText(letter).width;


    33. 

  33. 
           // 绘制白色背景，与图片背景对应


    34. 

  34. 
            context.fillStyle='#fff';


    35. 

  35. 
            context.fillRect(0,0,width,22);


    36. 

  36. 
           // 绘制文字，以获取字型数据


    37. 

  37. 
            context.fillStyle='#000';


    38. 

  38. 
            context.fillText(letter,0,0);


    39. 

  39. 
           // 缓存字型灰度化0-1数据


    40. 

  40. 
            letterData[letter]={


    41. 

  41. 
                width:width,


    42. 

  42. 
                data:getBinary(context.getImageData(0,0,width,22).data)


    43. 

  43. 
           }


    44. 

  44. 
           // 清空该区域以获取下个字符字型数据


    45. 

  45. 
            context.clearRect(0,0,width,22);


    46. 

  46. 
       }


    47. 

  47. 
       // console.log(letterData);


    48. 

  48.        

    49. 

  49. 
       // 绘制图片


    50. 

  50. 
        context.drawImage(this,0,0);


    51. 

  51. 
       // 要识别的文字开始坐标


    52. 

  52. 
       varx=beginX=8;


    53. 

  53. 
       vary=beginY=161;


    54. 

  54. 
       // 行高


    55. 

  55. 
       varlineHeight=24;


    56. 

  56. 
       // 递归次数


    57. 

  57. 
       varcount=0;


    58. 

  58. 
       // 结果文本


    59. 

  59. 
       varresult='';


    60. 

  60. 

    61. 

  61. 
       // 递归开始


    62. 

  62. 
        findLetter(beginX,beginY,'');


    63. 

  63. 
       // 递归函数


    64. 

  64. 
       functionfindLetter(x,y,str){


    65. 

  65. 
           // 找到结果文本，则递归结束


    66. 

  66. 
           if(result){


    67. 

  67. 
               return;


    68. 

  68. 
           }


    69. 

  69. 
           // 递归次数自增1


    70. 

  70. 
           ++count;


    71. 

  71. 
           // console.log(str);


    72. 

  72. 
           // 队列，用于储存可能匹配的字符


    73. 

  73. 
           varqueue=[];


    74. 

  74. 
           // 循环匹配字符库字型数据


    75. 

  75. 
           for(varletter in letterData){


    76. 

  76. 
               // 获取当前字符宽度


    77. 

  77. 
               varwidth=letterData[letter].width;


    78. 

  78. 
               // 获取该矩形区域下的灰度化0-1数据


    79. 

  79. 
               vardata=getBinary(context.getImageData(x,y,width,22).data);


    80. 

  80. 
               // 当前字符灰度化数据与当前矩形区域下灰度化数据的偏差量


    81. 

  81. 
               vardeviation=0;


    82. 

  82. 
               // 一个临时变量以确定是否到了行末


    83. 

  83. 
               varisEmpty=true;


    84. 

  84. 
               // 如果当前矩形区域已经超出图片宽度，则进行下一个字符匹配


    85. 

  85. 
               if(x+width>440){


    86. 

  86. 
                   continue;


    87. 

  87. 
               }


    88. 

  88. 
               // 计算偏差


    89. 

  89. 
               for(vari=0,l=data.length;i<l;++i){


    90. 

  90. 
                   // 如果发现存在的有效像素点，则确定未到行末


    91. 

  91. 
                   if(isEmpty&&data[i]){


    92. 

  92. 
                        isEmpty=false;


    93. 

  93. 
                   }


    94. 

  94. 
                   // 不匹配的像素点，偏差量自增1


    95. 

  95. 
                   if(data[i]!=letterData[letter].data[i]){


    96. 

  96. 
                       ++deviation;


    97. 

  97. 
                   }


    98. 

  98. 
               }


    99. 

  99. 
               // 由于调试时是在猎豹浏览器下进行的，而不同浏览器下的绘图API表现略有不同


    100. 

  100. 
               // 考虑到用Chrome的读者应该也不少，故简单地针对Chrome对偏差进行一点手动微调


    101. 

  101. 
               // （好吧，我承认我是懒得重新调整getBinary方法的灰度化、0-1化公式=_=||）


    102. 

  102. 
               // 下面这段if分支在猎豹浏览器下可以删除


    103. 

  103. 
               if(letter=='F'||letter=='E'){


    104. 

  104. 
                    deviation-=6;


    105. 

  105. 
               }


    106. 

  106. 
               // 如果匹配完所有17行数据，则递归结束


    107. 

  107. 
               if(y>beginY+lineHeight*17){


    108. 

  108. 
                    result=str;


    109. 

  109. 
                   break;


    110. 

  110. 
               }


    111. 

  111. 
               // 如果已经到了行末，重置匹配坐标


    112. 

  112. 
               if(isEmpty){


    113. 

  113. 
                    x=beginX;


    114. 

  114. 
                    y+=lineHeight;


    115. 

  115. 
                    str+='\n';


    116. 

  116. 
               }


    117. 

  117. 
               // 如果偏差量与宽度的比值小于3，则纳入匹配队列中


    118. 

  118. 
               // 这里也是算法中的关键点，怎样的偏差量可以纳入匹配队列中


    119. 

  119. 
               // 刚开始是直接用绝对偏差量判断，当偏差量小于某个值的时候则匹配成功，但调试过程中发现不妥之处


    120. 

  120. 
               // 字符字型较小的绝对偏差量自然也小，这样l，i等较小的字型特别容易匹配成功


    121. 

  121. 
               // 因此使用偏差量与字型宽度的比值作为判断依据较为合理


    122. 

  122. 
               // 而这个判断值3的确定也是难点之一，大了递归的复杂度会大为增长，小了很可能将正确的字符漏掉


    123. 

  123. 
               if(deviation/width<3){


    124. 

  124. 
                    queue.push({


    125. 

  125. 
                        letter:letter,


    126. 

  126. 
                        width:width,


    127. 

  127. 
                        deviation:deviation


    128. 

  128. 
                   });


    129. 

  129. 
               }


    130. 

  130. 
           }


    131. 

  131. 
           // 如果匹配队列不为空


    132. 

  132. 
           if(queue.length){


    133. 

  133. 
               // 对队列进行排序，同样是根据偏差量与字符宽度的比例


    134. 

  134. 
                queue.sort(compare);


    135. 

  135. 
               // console.log(queue);


    136. 

  136. 
               // 从队头开始进行下一个字符的匹配


    137. 

  137. 
               for(vari=0;i<queue.length&&!result;++i){


    138. 

  138. 
                   varitem=queue[i];


    139. 

  139. 
                   // 下一步递归


    140. 

  140. 
                    findLetter(x+item.width,y,str+item.letter);


    141. 

  141. 
               }


    142. 

  142. 
           }else{


    143. 

  143. 
               returnfalse;


    144. 

  144. 
           }


    145. 

  145. 
       }


    146. 

  146. 
       // 递归结束


    147. 

  147. 

    148. 

  148. 
       // 两个匹配到的字符的比较方法，用于排序


    149. 

  149. 
       functioncompare(letter1,letter2){


    150. 

  150. 
           returnletter1.deviation/letter1.width-letter2.deviation/letter2.width;


    151. 

  151. 
       }


    152. 

  152. 

    153. 

  153. 
       // 图像数据的灰度化及0-1化


    154. 

  154. 
       functiongetBinary(data){


    155. 

  155. 
           varbinaryData=[];


    156. 

  156. 
           for(vari=0,l=data.length;i<l;i+=4){


    157. 

  157. 
               // 尝试过三种方式


    158. 

  158. 
               // 一种是正常的灰度化公式，无论系数如何调整都无法与绘制的文字字型数据很好地匹配


    159. 

  159. 
               // binaryData[i / 4] = (data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11) < 90;


    160. 

  160. 
               // 一种是自己是通过自己手动调整系数，结果虽然接近但总是不尽人意


    161. 

  161. 
               // binaryData[i / 4] = data[i] < 250 && data[i + 1] < 203 && data[i + 2] < 203;


    162. 

  162. 
               // 最后使用了平均值，结果比较理想


    163. 

  163. 
                binaryData[i/4]=(data[i]+data[i+1]+data[i+2])/3<200;


    164. 

  164. 
           }


    165. 

  165. 
           returnbinaryData;


    166. 

  166. 
       }


    167. 

  167. 
        console.log(result);


    168. 

  168. 
       // 输出耗时


    169. 

  169. 
        console.log(count,(newDate().getTime()-beginTime)/1000+' s');


    170. 

  170. 

    171. 

  171. 
       // 将文字绘制到图片对应位置上，以方便查看提取是否正确


    172. 

  172. 
        context.drawImage(this,this.width,0);


    173. 

  173. 
       vartextArray=result.split('\n');


    174. 

  174. 
       for(vari=0;i<textArray.length;++i){


    175. 

  175. 
            context.fillText(textArray[i],this.width+beginX,beginY+lineHeight*i);


    176. 

  176. 
       }


    177. 

  177. 
   }


    178. 

  178. 
   </script>


    179. 

  179. 
</body>


    180. 

  180. </html>
    181.


运行环境

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


运行结果 


    

  1. yv66vgAAADIAHQoABgAPCQAQABEIABIKABMAFAcAF

    2. 

  2. 
QcAFgEABjxpbml0PgEAAygpVgEABENvZGUB


    3. 

  3. AA9MaW5lTnVtYmVyVGFibGUBAARtYWluAQAWKFtMa

    4. 

  4. mF2YS9sYW5nL1N0cmluZzspVgEAClNvdXJj

    5. 

  5. 
ZUZpbGUBAAlNYWluLmphdmEMAAcACAcAFwwAGAA


    6. 

  6. 
ZAQBv5paw5rWq6Laz55CD6Zif5a6e5Yqb6LaF


    7. 

  7. 
576k77yM6Zi15a656LGq5Y2O44CC5LmF5Luw5aSn5ZC


    8. 

  8. 
N77yM5ZGo5pel5LiA5oiY77yM6L+Y5pyb


    9. 

  9. 
5LiN6YGX5L2Z5Yqb77yM5LiN5ZCd6LWQ5pWZ44CCBw


    10. 

  10. 
AaDAAbABwBAARNYWluAQAQamF2YS9sYW5n


    11. 

  11. L09iamVjdAEAEGphdmEvbGFuZy9TeXN0ZW0BAANvdX

    12. 

  12. 
QBABVMamF2YS9pby9QcmludFN0cmVhbTsB


    13. 

  13. 
ABNqYXZhL2lvL1ByaW50U3RyZWFtAQAHcHJpbnRsbgE


    14. 

  14. 
AFShMamF2YS9sYW5nL1N0cmluZzspVgAh


    15. 

  15. 
AAUABgAAAAAAAgABAAcACAABAAkAAAAdAAEAAQA


    16. 

  16. 
AAAUqtwABsQAAAAEACgAAAAYAAQAAAAEACQAL


    17. 

  17. 
AAwAAQAJAAAAJQACAAEAAAAJsgACEgO2AASxAAAA


    18. 

  18. 
AQAKAAAACgACAAAAAwAIAAQAAQANAAAAAgAO


    19. 

  19. 

    20. 

  20. 
7151.984s（猎豹）


    21. 

  21. 
77215.52s（Chrome）

    22.

（递归次数谷歌只比猎豹多几十，耗时却对了十几秒，看来猎豹真的比Chrome快？）


非递归实现


其实非递归实现只是递归实现前做的一点小尝试，只在猎豹下调试完成，因为不舍得删，所以顺便贴出来了，使用Chrome的各位就不要跑了（我真的不是在给猎豹做广告= =||）。

    

  1. 
<!doctype html>


    2. 

  2. 
<htmllang="zh-CN">


    3. 

  3. 
<head>


    4. 

  4. 
   <metacharset="UTF-8">


    5. 

  5. 
   <title>文字识别</title>


    6. 

  6. 
</head>


    7. 

  7. 
<body>


    8. 

  8. 
   <canvasid="canvas"width="880"height="1500"></canvas>


    9. 

  9. 
   <scripttype="text/javascript">


    10. 

  10. 
   varimage=newImage();


    11. 

  11. 
    image.onload=recognition;


    12. 

  12. 
    image.src='image.jpg';


    13. 

  13. 
   functionrecognition(){


    14. 

  14. 
       // 开始时间，用于计算耗时


    15. 

  15. 
       varbeginTime=newDate().getTime();


    16. 

  16. 
       // 获取画布


    17. 

  17. 
       varcanvas=document.getElementById('canvas');


    18. 

  18. 
       // 字符库


    19. 

  19. 
       varletters='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+';


    20. 

  20. 
       // 字型数据


    21. 

  21. 
       varletterData={};


    22. 

  22. 
       // 获取context


    23. 

  23. 
       varcontext=canvas.getContext('2d');


    24. 

  24. 
       // 设置字体、字号


    25. 

  25. 
        context.font='16px 微软雅黑';


    26. 

  26. 
       // 设置文字绘制基线为文字顶端


    27. 

  27. 
        context.textBaseline='top';


    28. 

  28. 
       // 一个循环获取字符库对应的字型数据


    29. 

  29. 
       for(vari=0;i<letters.length;++i){


    30. 

  30. 
           varletter=letters[i];


    31. 

  31. 
           // 获取字符绘制宽度


    32. 

  32. 
           varwidth=context.measureText(letter).width;


    33. 

  33. 
           // 绘制白色背景，与图片背景对应


    34. 

  34. 
            context.fillStyle='#fff';


    35. 

  35. 
            context.fillRect(0,0,width,22);


    36. 

  36. 
           // 绘制文字，以获取字型数据


    37. 

  37. 
            context.fillStyle='#000';


    38. 

  38. 
            context.fillText(letter,0,0);


    39. 

  39. 
           // 缓存字型灰度化0-1数据


    40. 

  40. 
            letterData[letter]={


    41. 

  41. 
                width:width,


    42. 

  42. 
                data:getBinary(context.getImageData(0,0,width,22).data)


    43. 

  43. 
           }


    44. 

  44. 
           // 清空该区域以获取下个字符字型数据


    45. 

  45. 
            context.clearRect(0,0,width,22);


    46. 

  46. 
       }


    47. 

  47. 
       // console.log(letterData);


    48. 

  48.        

    49. 

  49. 
       // 绘制图片


    50. 

  50. 
        context.drawImage(this,0,0);


    51. 

  51. 
       // 要识别的文字开始坐标


    52. 

  52. 
       varx=beginX=8;


    53. 

  53. 
       vary=beginY=161;


    54. 

  54. 
       // 行高


    55. 

  55. 
       varlineHeight=24;


    56. 

  56. 
       // 结果文本


    57. 

  57. 
       varresult='';


    58. 

  58. 

    59. 

  59. 
       // 非递归开始


    60. 

  60. 
       varcount=0;


    61. 

  61. 
       while(y<=569&&++count<1000){


    62. 

  62. 
           // 当前最匹配的字符


    63. 

  63. 
           vartrueLetter={letter:null,width:null,deviation:100};


    64. 

  64. 
           // 循环匹配字符


    65. 

  65. 
           for(varletter in letterData){


    66. 

  66. 
               // 获取当前字符宽度


    67. 

  67. 
               varwidth=letterData[letter].width;


    68. 

  68. 
               // 获取该矩形区域下的灰度化0-1数据


    69. 

  69. 
               vardata=getBinary(context.getImageData(x,y,width,22).data);


    70. 

  70. 
               // 当前字符灰度化数据与当前矩形区域下灰度化数据的偏差量


    71. 

  71. 
               vardeviation=0;


    72. 

  72. 
               // 一个临时变量以确定是否到了行末


    73. 

  73. 
               varisEmpty=true;


    74. 

  74. 
               // 如果当前矩形区域已经超出图片宽度，则进行下一个字符匹配


    75. 

  75. 
               if(x+width>this.width){


    76. 

  76. 
                   continue;


    77. 

  77. 
               }


    78. 

  78. 
               // 计算偏差


    79. 

  79. 
               for(vari=0,l=data.length;i<l;++i){


    80. 

  80. 
                   // 如果发现存在的有效像素点，则确定未到行末


    81. 

  81. 
                   if(isEmpty&&data[i]){


    82. 

  82. 
                        isEmpty=false;


    83. 

  83. 
                   }


    84. 

  84. 
                   // 不匹配的像素点，偏差量自增1


    85. 

  85. 
                   if(data[i]!=letterData[letter].data[i]){


    86. 

  86. 
                       ++deviation;


    87. 

  87. 
                   }


    88. 

  88. 
               }


    89. 

  89. 
               // 非递归无法遍历所有情况，因此针对某些字符进行一些微调（这里只针对猎豹，Chrome的没做）


    90. 

  90. 
               // 因为其实非递归实现只是在递归实现前做的一点小尝试，因为不舍得删，就顺便贴出来了


    91. 

  91. 
               if(letter=='M'){


    92. 

  92. 
                    deviation-=6;


    93. 

  93. 
               }


    94. 

  94. 
               // 如果偏差量与宽度的比值小于3，则视为匹配成功


    95. 

  95. 
               if(deviation/width<3){


    96. 

  96. 
                   // 将偏差量与宽度比值最小的作为当前最匹配的字符


    97. 

  97. 
                   if(deviation/width<trueLetter.deviation/trueLetter.width){


    98. 

  98. 
                        trueLetter.letter=letter;


    99. 

  99. 
                        trueLetter.width=width;


    100. 

  100. 
                        trueLetter.deviation=deviation;


    101. 

  101. 
                   }


    102. 

  102. 
               }


    103. 

  103. 
           }


    104. 

  104. 
           // 如果已经到了行末，重置匹配坐标，进行下一轮匹配


    105. 

  105. 
           if(isEmpty){


    106. 

  106. 
                x=beginX;


    107. 

  107. 
                y+=lineHeight;


    108. 

  108. 
                result+='\n';


    109. 

  109. 
               continue;


    110. 

  110. 
           }


    111. 

  111. 
           // 如果匹配到的字符不为空，则加入结果字符串，否则输出匹配结果


    112. 

  112. 
           if(trueLetter.letter){


    113. 

  113. 
                result+=trueLetter.letter;


    114. 

  114. 
               // console.log(x, y, trueLetter.letter);


    115. 

  115. 
           }else{


    116. 

  116. 
                console.log(x,y,result.length);


    117. 

  117. 
               break;


    118. 

  118. 
           }


    119. 

  119. 
           // 调整坐标至下一个字符匹配位置


    120. 

  120. 
            x+=trueLetter.width;


    121. 

  121. 
       }


    122. 

  122. 
       // 非递归结束


    123. 

  123. 

    124. 

  124. 
       // 图像数据的灰度化及0-1化


    125. 

  125. 
       functiongetBinary(data){


    126. 

  126. 
           varbinaryData=[];


    127. 

  127. 
           for(vari=0,l=data.length;i<l;i+=4){


    128. 

  128. 
               // 尝试过三种方式


    129. 

  129. 
               // 一种是正常的灰度化公式，无论系数如何调整都无法与绘制的文字字型数据很好地匹配


    130. 

  130. 
               // binaryData[i / 4] = (data[i] * 0.3 + data[i + 1] * 0.59 + data[i + 2] * 0.11) < 90;


    131. 

  131. 
               // 一种是自己是通过自己手动调整系数，结果虽然接近但总是不尽人意


    132. 

  132. 
               // binaryData[i / 4] = data[i] < 250 && data[i + 1] < 203 && data[i + 2] < 203;


    133. 

  133. 
               // 最后使用了平均值，结果比较理想


    134. 

  134. 
                binaryData[i/4]=(data[i]+data[i+1]+data[i+2])/3<200;


    135. 

  135. 
           }


    136. 

  136. 
           returnbinaryData;


    137. 

  137. 
       }


    138. 

  138. 
        console.log(result);


    139. 

  139. 
       // 输出耗时


    140. 

  140. 
        console.log(count,(newDate().getTime()-beginTime)/1000+' s');


    141. 

  141. 

    142. 

  142. 
       // 将文字绘制到图片对应位置上，以方便查看提取是否正确


    143. 

  143. 
        context.drawImage(this,this.width,0);


    144. 

  144. 
       vartextArray=result.split('\n');


    145. 

  145. 
       for(vari=0;i<textArray.length;++i){


    146. 

  146. 
            context.fillText(textArray[i],this.width+beginX,beginY+lineHeight*i);


    147. 

  147. 
       }


    148. 

  148. 
   }


    149. 

  149. 
   </script>


    150. 

  150. 
</body>


    151. 

  151. </html>
    152.


运行结果 


    

  1. yv66vgAAADIAHQoABgAPCQAQABEIABIKABMAFAcAF

    2. 

  2. 
QcAFgEABjxpbml0PgEAAygpVgEABENvZGUB


    3. 

  3. AA9MaW5lTnVtYmVyVGFibGUBAARtYWluAQAWKFtMa

    4. 

  4. mF2YS9sYW5nL1N0cmluZzspVgEAClNvdXJj

    5. 

  5. 
ZUZpbGUBAAlNYWluLmphdmEMAAcACAcAFwwAGAA


    6. 

  6. 
ZAQBv5paw5rWq6Laz55CD6Zif5a6e5Yqb6LaF


    7. 

  7. 
576k77yM6Zi15a656LGq5Y2O44CC5LmF5Luw5aSn5ZC


    8. 

  8. 
N77yM5ZGo5pel5LiA5oiY77yM6L+Y5pyb


    9. 

  9. 
5LiN6YGX5L2Z5Yqb77yM5LiN5ZCd6LWQ5pWZ44CCBw


    10. 

  10. 
AaDAAbABwBAARNYWluAQAQamF2YS9sYW5n


    11. 

  11. L09iamVjdAEAEGphdmEvbGFuZy9TeXN0ZW0BAANvdX

    12. 

  12. 
QBABVMamF2YS9pby9QcmludFN0cmVhbTsB


    13. 

  13. 
ABNqYXZhL2lvL1ByaW50U3RyZWFtAQAHcHJpbnRsbgE


    14. 

  14. 
AFShMamF2YS9sYW5nL1N0cmluZzspVgAh


    15. 

  15. 
AAUABgAAAAAAAgABAAcACAABAAkAAAAdAAEAAQA


    16. 

  16. 
AAAUqtwABsQAAAAEACgAAAAYAAQAAAAEACQAL


    17. 

  17. 
AAwAAQAJAAAAJQACAAEAAAAJsgACEgO2AASxAAAA


    18. 

  18. 
AQAKAAAACgACAAAAAwAIAAQAAQANAAAAAgAO


    19. 

  19. 

    20. 

  20. 
7021.931s（猎豹）

    21.

真正的结果


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


写在最后


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

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

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

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




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




分享到：
| 一起学习iOS开发专用词汇，每天记3个，助 ...
评论
1 楼 再_见孙悟空 2014-02-03  
能识别中文不？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics