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

2020-03-24 16:38:18

字體：大中小

供稿：網(wǎng)友

敝校的教務(wù)管理系統(tǒng)（貌似不止我們學(xué)校用呢），一到選課時(shí)間服務(wù)器各種崩不解釋，有時(shí)為了選個(gè)課就要反復(fù)輸入驗(yàn)證碼，一想到千千萬(wàn)萬(wàn)的大學(xué)生把時(shí)間浪費(fèi)在輸入驗(yàn)證碼上面，我就覺得，我有義務(wù)拯救一下人類。

搜了一下，看到這篇文章，3年前的文章了。我參考了前半部分，借助TamperMonkey這個(gè)插件，大概實(shí)現(xiàn)了想要的效果。可以在Userscript獲取這個(gè)腳本，GitHub上面也有，代碼寫得丑，求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;
}
}
}

然后我用html' target='_blank'>畫圖工具放大圖片，觀察了一下，得出每個(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) 寫出這個(gè)函數(shù)：

復(fù)制代碼代碼如下:
function getNum(imgData,x1,y1,x2,y2){
var num = 0;
for(i=y1; i i++){
for(j=x1; j 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ì)用，所以就沒用了
我用這個(gè)方法獲得的驗(yàn)證碼準(zhǔn)確率也有95%以上，暫時(shí)夠用了。有空再研究一下神經(jīng)網(wǎng)絡(luò)好了。
有需要的同學(xué)可以拿去用，Chrome瀏覽器要先裝TamperMonkey，F(xiàn)irefox則是GeaseMonkey，然后安裝這個(gè)腳本就ok了。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html button標(biāo)簽的樣式怎么設(shè)置？html button標(biāo)簽的樣式介紹

下一篇：HTML文檔基本格式的詳細(xì)介紹