濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > 利用html5 canvas破解簡(jiǎn)單驗(yàn)證碼及getImageData接口應(yīng)用

利用html5 canvas破解簡(jiǎn)單驗(yàn)證碼及getImageData接口應(yīng)用

熱門(mén)標(biāo)簽:平頂山電子地圖標(biāo)注怎么修改 地圖標(biāo)注自己去過(guò)的地方 高德地圖標(biāo)注錯(cuò)誤怎么修改 洛陽(yáng)市伊川縣地圖標(biāo)注中心官網(wǎng) 電銷(xiāo)機(jī)器人視頻 江蘇高頻外呼系統(tǒng)線路 標(biāo)準(zhǔn)智能外呼系統(tǒng) 搜狗星級(jí)酒店地圖標(biāo)注 會(huì)聲會(huì)影怎樣做地圖標(biāo)注效果
敝校的教務(wù)管理系統(tǒng)(貌似不止我們學(xué)校用呢),一到選課時(shí)間服務(wù)器各種崩不解釋?zhuān)袝r(shí)為了選個(gè)課就要反復(fù)輸入驗(yàn)證碼,一想到千千萬(wàn)萬(wàn)的大學(xué)生把時(shí)間浪費(fèi)在輸入驗(yàn)證碼上面,我就覺(jué)得,我有義務(wù)拯救一下人類(lèi)。

搜了一下,看到這篇文章,3年前的文章了。我參考了前半部分,借助TamperMonkey這個(gè)插件,大概實(shí)現(xiàn)了想要的效果??梢栽赨serscript獲取這個(gè)腳本,GitHub上面也有,代碼寫(xiě)得丑,求debug,求指教。
說(shuō)下思路:HTML 5中的canvas有個(gè)接口getImageData可以用來(lái)從驗(yàn)證碼圖像中取得像素?cái)?shù)據(jù)。每一個(gè)像素有對(duì)應(yīng)r,g,b,a四個(gè)值,r,g,b是紅綠藍(lán)三色,a是透明度。

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

復(fù)制代碼
代碼如下:

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;
}
}
}  

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

復(fù)制代碼
代碼如下:

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ò)來(lái)判斷,準(zhǔn)確率大大提高,我不會(huì)用,所以就沒(méi)用了……
我用這個(gè)方法獲得的驗(yàn)證碼準(zhǔn)確率也有95%以上,暫時(shí)夠用了。有空再研究一下神經(jīng)網(wǎng)絡(luò)好了。
有需要的同學(xué)可以拿去用,Chrome瀏覽器要先裝TamperMonkey,F(xiàn)irefox則是GeaseMonkey,然后安裝這個(gè)腳本就ok了。

標(biāo)簽:常德 果洛 蚌埠 廣西 鄂爾多斯 廣東 松原 阿克蘇

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《利用html5 canvas破解簡(jiǎn)單驗(yàn)證碼及getImageData接口應(yīng)用》,本文關(guān)鍵詞  利用,html5,canvas,破解,簡(jiǎn)單,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《利用html5 canvas破解簡(jiǎn)單驗(yàn)證碼及getImageData接口應(yīng)用》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于利用html5 canvas破解簡(jiǎn)單驗(yàn)證碼及getImageData接口應(yīng)用的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    治多县| 黔南| 疏勒县| 隆林| 汉阴县| 牡丹江市| 六枝特区| 舒城县| 潮州市| 商城县| 松潘县| 永定县| 建宁县| 平山县| 曲阜市| 密山市| 东安县| 牟定县| 福泉市| 罗城| 甘德县| 三原县| 含山县| 安丘市| 长春市| 突泉县| 甘德县| 富顺县| 云浮市| 抚松县| 兴业县| 卫辉市| 宣化县| 苍溪县| 大埔区| 高密市| 同德县| 大丰市| 无锡市| 枝江市| 荣昌县|