【转】借助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脚本。如果你要亲自尝试一下，可以先看看这个演示。而这个脚本的作用，正如名字所示，可以识别这个网站的验证码。

现在，这个网站的验证码已经不是个什么难题了。（实际上，这是一个本来设计的就不怎么好的验证码，下面会给出一些例子）

对于这段脚本，我们有很多值得注意的事情：

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

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

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