【转】借助OCR和神经网络,用JavaScript识别验证码

转载自  deadpig
最终编辑  deadpig

原文作者:John Resig
原文链接:OCR and Neural Nets in JavaScript
译者:七月佑安

【原文标题】 OCR and Neural Nets in JavaScript
【原文作者】 John Resig
昨天发现的了一段非常令人惊奇的JavaScript代码,是由 ShaunF编写的 automatically solves captchas,一个专门应用在 Megaupload网站的Greasemonkey脚本。如果你要亲自尝试一下,可以先看看这个 演示。而这个脚本的作用,正如名字所示,可以识别这个网站的验证码。
现在,这个网站的验证码已经不是个什么难题了。(实际上,这是一个本来设计的就不怎么好的验证码,下面会给出一些例子)
对于这段脚本,我们有很多值得注意的事情:
  1. Canvas可以将图片嵌入到画布上,而getImageData函数可以从画布上获取验证码的像素数据。
  2. 这个脚本完全用JavaScript编写了一套神经网络的实现。
  3. 通过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 ( 002025 );
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 ]00
edges [ 2 ]-edges [ 0 ], edges [ 3 ]-edges [ 1 ] );

image_data[i] = cropped_canvas.getContext("2d").getImageData(00
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%精确的(不知道如果在开始的时候不将字母转换成矩形,是不是可以提高评分的精度),但这已经相当好了,至少对于当前的用途来说。而且所有的操作都是在浏览器中,通过基于标准的客户端技术实现的,这不是很神奇么?

补充说明一下,这个脚本应该算是一个特例吧,这项技术可能会应用在更多设计不良的验证码上,但对于更多设计复杂的验证码来说,就有点力不从心了(尤其是这种基于客户端的分析)。

我非常期待能有更多人从这个项目中得到灵感,开发出更多有意思的东西来,它的潜力太巨大了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值