HTML 5中的canvas有個接口getImageData可以用來從驗證碼圖像中取得像素數(shù)據(jù)。每一個像素有對應(yīng)r,g,b,a四個值，r,g,b是紅綠藍(lán)三色，a是透明度;觀察了一下，接下來說下思路及實現(xiàn)代碼.

搜了一下，看到這篇文章，3年前的文章了。我參考了前半部分，借助TamperMonkey這個插件，大概實現(xiàn)了想要的效果?？梢栽赨serscript獲取這個腳本，GitHub上面也有，代碼寫得丑，求debug，求指教。

說下思路：HTML 5中的canvas有個接口getImageData可以用來從驗證碼圖像中取得像素數(shù)據(jù)。每一個像素有對應(yīng)r,g,b,a四個值，r,g,b是紅綠藍(lán)三色，a是透明度。

觀察到教務(wù)管理系統(tǒng)的驗證碼是5個數(shù)字，字體字號大小都不變，而且雖然背景雖然有干擾，但是很明顯跟字體顏色有很大區(qū)別，所以就用了一個很粗糙的方法：我們知道，顏色越淺，rgb值越大，顏色越深，rgb值越少。于是我對每一個像素點(diǎn)進(jìn)行判斷，rgb的和小于350（這個值是測出來的）的就是屬于字體的像素，為了方便觀察，把它的rgb值都設(shè)置為255，否則設(shè)置為0。這樣就獲得了一個黑底白字的圖片了。

代碼如下:

var ctx = canvas.getContext('2d');

ctx.drawImage(img,0,0);

var c = ctx.getImageData(0,0,img.width,img.height);

for(i=0; i<c.height; i++){

for(j=0; j<c.width; j++){

var x = (i*4)*c.width+(j*4);

var r = c.data[x];

var g = c.data[x+1];

var b = c.data[x+2];

if(r+g+b > 350){

c.data[x] = c.data[x+1] = c.data[x+2] = 0;

}

else{

c.data[x] = c.data[x+1] = c.data[x+2] = 255;

}

}

}　　

然后我用畫圖工具放大圖片，觀察了一下，得出每個數(shù)字是一個12*8像素的矩形，再之后就求出每一個數(shù)字對應(yīng)的像素個數(shù)，發(fā)現(xiàn)0和8還有6和9的像素個數(shù)是一樣的，就進(jìn)行一下特判（比如正中間有像素的就肯定是8而不是0了）。然后……還是觀察一下……每個數(shù)字對應(yīng)的矩陣的坐標(biāo)……寫出這個函數(shù)：

代碼如下:

function getNum(imgData,x1,y1,x2,y2){

var num = 0;

for(i=y1; i<y2; i++){

for(j=x1; j<x2; j++){

var x = (i*4)*imgData.width+(j*4);

if(imgData.data[x] == 255)num++;

}

}

switch(num)

{

case 56:{

j = (x1+x2)/2;

i = (y1+y2)/2;

var x = (i*4)*imgData.width+(j*4);

if(imgData.data[x] == 255)

return 8;

else

return 0;

}

case 30:return 1;

case 50:return 2;

case 51:return 3;

case 48:return 4;

case 57:return 5;

case 58:{

i = y2-2;

j = x1;

var x = (i*4)*imgData.width+(j*4);

if(imgData.data[x] == 255)

return 9;

else

return 6;

}

case 37:return 7;

default:return 0;

}

}

原文用了神經(jīng)網(wǎng)絡(luò)來判斷，準(zhǔn)確率大大提高，我不會用，所以就沒用了……

我用這個方法獲得的驗證碼準(zhǔn)確率也有95%以上，暫時夠用了。有空再研究一下神經(jīng)網(wǎng)絡(luò)好了。

有需要的同學(xué)可以拿去用，Chrome瀏覽器要先裝TamperMonkey，F(xiàn)irefox則是GeaseMonkey，然后安裝這個腳本就ok了。