點評::HTML 5中的canvas有個接口getImageData可以用來從驗證碼圖像中取得像素數據。每一個像素有對應r,g,b,a四個值,r,g,b是紅綠藍三色,a是透明度;觀察了一下,接下來說下思路及實現代碼,感興趣的你可不喲啊走開啊
敝校的教務管理系統(貌似不止我們學校用呢),一到選課時間服務器各種崩不解釋,有時為了選個課就要反復輸入驗證碼,一想到千千萬萬的大學生把時間浪費在輸入驗證碼上面,我就覺得,我有義務拯救一下人類。復制代碼
代碼如下:
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;
}
}
}
復制代碼
代碼如下:
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;
}
}
新聞熱點
疑難解答