借助OCR和神经网络，用JavaScript识别验证码

转载自  deadpig

最终编辑  deadpig

原文作者：John Resig 原文链接：OCR and Neural Nets in JavaScript 译者：七月佑安 【原文标题】 OCR and Neural Nets in JavaScript 【原文作者】 John Resig 【译文地址】 http://cuimingda.com/2009/01/ocr-and-neural-nets-in-javascript.html 昨天发现的了一段非常令人惊奇的JavaScript代码，是由 ShaunF编写的 automatically solves captchas，一个专门应用在 Megaupload网站的Greasemonkey脚本。如果你要亲自尝试一下，可以先看看这个 演示。而这个脚本的作用，正如名字所示，可以识别这个网站的验证码。 现在，这个网站的验证码已经不是个什么难题了。（实际上，这是一个本来设计的就不怎么好的验证码，下面会给出一些例子） 对于这段脚本，我们有很多值得注意的事情： Canvas可以将图片嵌入到画布上，而getImageData函数可以从画布上获取验证码的像素数据。 这个脚本完全用JavaScript编写了一套神经网络的实现。 通过Canvas从图片获取的像素数据，被传入神经网络，通过OCR技术来获取图片中所表示的真实字符。 如果我们翻开 源代码，就会发现这个脚本究竟是如何实现的，我们也可以领会这个验证码究竟是如何实现的。就像我之前提到的，这个验证码设计的本身就不好，只有3个字母，而且还用不同的颜色区分，只包含26个字母，最主要的，他们始终是同一字体。 第一个步骤很明确：把验证码的像素图像复制到Canvas中，并且转换为灰度模式。 function convert_grey (image_data ) { for ( var x =  0; x <image_data. width; x++ ) { for ( var y =  0; y <image_data. height; y++ ) { var i = x* 4+y* 4*image_data. width; var luma = Math. floor (image_data. data [i ] *  299/ 1000 + image_data. data [i+ 1 ] *  587/ 1000 + image_data. data [i+ 2 ] *  114/ 1000 ); image_data.data[i] = luma; image_data.data[i+1] = luma; image_data.data[i+2] = luma; image_data.data[i+3] = 255; } } } 接下来Canvas被分解成3个独立的像素矩阵，每个矩阵都包含一个字母。（按道理来说，这是非常容易的事情。每个字母都由不同颜色组成，可以直接用颜色区分不同的字母。） filter (image_data [ 0 ],  105 ); filter (image_data [ 1 ],  120 ); filter (image_data [ 2 ],  135 ); function filter (image_data, colour ) { for ( var x =  0; x <image_data. width; x++ ) { for ( var y =  0; y <image_data. height; y++ ) { var i = x* 4+y* 4*image_data. width; // Turn all the pixels of the certain colour to white if(image_data.data[i] == colour){ image_data.data[i] = 255; image_data.data[i+1] = 255; image_data.data[i+2] = 255; // Everything else to black }else{ image_data.data[i] = 0; image_data.data[i+1] = 0; image_data.data[i+2] = 0; } } } } 然后最后，为了得到一个清晰的字母，我们还要把那些不相干的噪声像素从图片上去除。具体的方法，先要找到那些前面或者后面被黑色（之前没有匹配的像素）包裹的白色像素（之前已经匹配的像素），如果找到这样的像素，就简单的把它门直接删除。 var i = x* 4+y* 4*image_data. width; var above = x* 4+ (y- 1 )* 4*image_data. width; var below = x* 4+ (y+ 1 )* 4*image_data. width; if(image_data.data[i] == 255 && image_data.data[above] == 0 && image_data.data[below] == 0) { image_data.data[i] = 0; image_data.data[i+1] = 0; image_data.data[i+2] = 0; } 我们现在已经得到了非常接近的图形，但还不够明确。脚本接下来会检测出这些形状的边缘，具体的是要找到图形中最上面、最下面、最左面和最右面的像素，然后把图形转换成矩形，最后将矩形的数据转换为一个20*25的矩阵。 cropped_canvas. getContext ( "2d" ). fillRect ( 0,  0,  20,  25 ); var edges = find_edges (image_data [i ] ); cropped_canvas. getContext ( "2d" ). drawImage (canvas, edges [ 0 ], edges [ 1 ],  edges [ 2 ]-edges [ 0 ], edges [ 3 ]-edges [ 1 ],  0,  0,  edges [ 2 ]-edges [ 0 ], edges [ 3 ]-edges [ 1 ] ); image_data[i] = cropped_canvas.getContext("2d").getImageData(0, 0,  cropped_canvas.width, cropped_canvas.height); 最后，我们得到了什么？一个20*25的矩阵，里面包含着一个绘制着黑白两种颜色像素的矩形，真是令人兴奋啊。 矩形被进一步的缩小。一些关键位置的像素以接受体（receptors）的状态被提取出来，这些接受体最终会被传入神经网络。举例而言，某个接受体具体对应的可能是位于9*6位置像素的状态，有像素或者没有像素。脚本会提取一系列这样的状态（远少于对20*25矩阵整个计算的次数 - 只提取64种状态），并将这些状态传入神经网络。 你可能要问，为什么不直接对像素进行比较？为什么还要和神经网络扯在一起？问题的关键在于，我们要去掉那些模棱两可的情况。如果你试过了之前提到的 演示就会发现，直接进行像素比较比通过神经网络比较，更容易出现偶尔判断错误的情况。但我们必须承认，对于大部分用户来说，直接的像素比较应该已经足够了。 下一个步骤就是尝试猜字母了。神经网络中传入了64个布尔值（由其中的一个字母图像获取而来），同时包含一系列预先计算好的数据。神经网络的理念之一，就是我们首先要知道希望得到什么结果。很可能脚本的作者反复的运行脚本，并收集了一系列最佳评分，这些评分可能包含这样的含义：“如果9*6位置存在像素，那么有58%的可能是字母A”。 当神经网络对验证码中一个字母对应的64个布尔值进行计算以后，和一个预先计算好的字母表相比较，然后为和每个字母的匹配都给出一个分数。（最后的结果可能类似：98%的可能是字母A，36%的可能是字母B等） 当对验证码中的三个字母都经过了计算以后，最终的结果也就出来了。确定的是，肯定不是100%精确的（不知道如果在开始的时候不将字母转换成矩形，是不是可以提高评分的精度），但这已经相当好了，至少对于当前的用途来说。而且所有的操作都是在浏览器中，通过基于标准的客户端技术实现的，这不是很神奇么？ 补充说明一下，这个脚本应该算是一个特例吧，这项技术可能会应用在更多设计不良的验证码上，但对于更多设计复杂的验证码来说，就有点力不从心了（尤其是这种基于客户端的分析）。 我非常期待能有更多人从这个项目中得到灵感，开发出更多有意思的东西来，它的潜力太巨大了。