干貨：用js實現的簡單驗證碼識別

很高興大家喜歡！Github：leonof/imgRecJs，剛剛上傳，代碼還需要完善～因為有不少同學表示訓練和識別有疑問，我做了個小接口放在最后，可以方便大家先把流程走通。

 

后續會更新：將js代碼等打包成chrome擴展程序，這樣就可以讓瀏覽器自動識別，完全傻瓜式使用啦～！（更新啦：利用chrome擴展，讓瀏覽器執行我們的腳本）

 

其實整篇文章難度不高，網上也有很多java、c等的代碼。只是當時我寫代碼的時候，沒有找到純js可以用的代碼和庫，不能打包成chrome擴展，用起來還是不太方便的。所以在驗證了思路的可行性后，我就大致寫下來，給他人以方便吧。

 

目前有多種驗證碼識別思路，限於能力有限，我只好采用了最簡單的機器學習。目標驗證碼也比較簡單，如：

（含字母也一樣）

。識別控制速度在0.1秒以內的話，正確率在99.99999%（因為一直是識別正確哈哈哈）。

 

在動手之前，先梳理一下大致思路，方便比較獨立的同學自己嘗試完成代碼：

1、先分析網頁DOM結構，載入驗證碼圖片。

2、將圖片畫到canvas上，拿到圖片的像素數據。

3、先后對圖片進行二值化、腐蝕膨脹、切割、旋轉、縮放處理。

4、記錄處理后的單個數字的二值化數據，並人工錄入真實數字。

5、重復訓練。

6、識別時，用處理后的圖像與庫中數據對比，取得最相近的數據，得到真實數字。

（以下優化）

7、數據量大時，可以取前幾個相似數據，並按權重從中選出最可能的數字，以提高准確度。

8、也可查找到相似度足夠高時停止搜索，取其作為最后識別結果，以提升效率。

 

大神們可以直接去寫了，我這低級簡單的代碼會遭你們嘲笑的。。。比較急於求成的同學也可以不用看了，回頭直接拿demo去修改吧！

 

====================================================================

 

好吧既然你看到這里了，我就盡量說的清楚明白一點。

在動手之前，我簡單模擬一下需要輸入驗證碼的網站，效果如下：

 

好吧，是真的簡單…點擊圖片可以更換驗證碼，輸入框用來輸入，按鈕模擬提交，如下：

 

 

我們就假裝他作為我們要自動識別的目標。

一、分析網頁DOM結構，載入驗證碼圖片。

我們可以看到，驗證碼的url是：img/0.jpg。我這里的url會變化，是為了模擬更換驗證碼的過程。但實際上，由於驗證碼絕大多數為后台生成的，所以地址是固定的。那么我們很容易就可以拿到圖片數據：new一個Image，賦值url即可（直接get到img元素也行）。參考代碼：

var img = document.getElementById("img");

 

二、將圖片畫到canvas上，拿到圖片的像素數據。

要將圖片畫到canvas上，首先要創建一個canvas並初始化。參考代碼：

var canvas1 = document.createElement("canvas");
document.getElementsByTagName("body")[0].appendChild(canvas1);
canvas1.style.backgroundColor = "cornsilk";
var ctx1 = canvas1.getContext("2d");

 

隨后，將圖片繪制上去。參考代碼：

ctx1.drawImage(img,0,0,img.width,img.height);

 

然后我們就可以利用canvas，拿到圖片的像素數據。參考代碼：

var imgData = ctx1.getImageData(0,0,WIDTH,HEIGHT);

 

三、先后對圖片進行二值化、腐蝕膨脹、切割、旋轉、縮放處理。

這部分是圖像識別的重點，直接影響到識別准確率和速度。復雜的驗證碼還應加上去躁等處理過程。比如可以檢測貫穿的橫線並消除，或者將顏色高度統一的背景去掉等等。我們的圖片幾乎沒有干擾，只有簡單的旋轉和縮放，故直接進行二值化操作（二值化也能去掉少量的干擾）。

1、二值化操作的思路是：計算圖片的平均灰度作為閾值，比閾值大的置為純黑，反之純白。參考代碼：

function toHex(fromImgData){//二值化圖像
    var fromPixelData = fromImgData.data;
    var greyAve = 0;
    for(var j=0;j<WIDTH*HEIGHT;j++){
        var r = fromPixelData[4*j];
        var g = fromPixelData[4*j+1];
        var b = fromPixelData[4*j+2];
        greyAve += r*0.3 + g*0.59 + b*0.11;
    }
    greyAve /= WIDTH*HEIGHT;//計算平均灰度值。
    for(j=0;j<WIDTH*HEIGHT;j++){
        r = fromPixelData[4*j];
        g = fromPixelData[4*j+1];
        b = fromPixelData[4*j+2];
        var grey = r*0.333 + g*0.333 + b*0.333;//取平均值。
        grey = grey>greyAve?255:0;
        fromPixelData[4*j] = grey;
        fromPixelData[4*j+1] = grey;
        fromPixelData[4*j+2] = grey;
    }
    return fromImgData;
}//二值化圖像

 

二值化后，效果如圖：

 

 

可以發現，簡單的背景色是可以去掉的。

二值化處理之后，就可以將圖片轉換成數組（存0或1）來保存了。參考代碼如下：

function toXY(fromImgData){
    var result = new Array(HEIGHT);
    var fromPixelData = fromImgData.data;
    for(var j=0;j<HEIGHT;j++){
        result[j] = new Array(WIDTH);
        for(var k=0;k<WIDTH;k++){
            var r = fromPixelData[4*(j*WIDTH+k)];
            var g = fromPixelData[4*(j*WIDTH+k)+1];
            var b = fromPixelData[4*(j*WIDTH+k)+2];

            result[j][k] = (r+g+b)>500?0:1;//賦值0、1給內部數組
        }
    }
    return result;
}//圖像轉數組

 

2、接下來是腐蝕、膨脹。腐蝕的基本思路在於，將所有白色周圍的像素都置成白色，以此來消除游離的個別黑色像素點噪聲。膨脹正好相反，將黑色周圍置成黑色，消除數字內部的個別白色。同時，腐蝕、膨脹的操作可以讓圖片更加平滑。參考代碼：

function corrode(fromArray){
    for(var j=1;j<fromArray.length-1;j++){
        for(var k=1;k<fromArray[j].length-1;k++){
            if(fromArray[j][k]==1&&fromArray[j-1][k]+fromArray[j+1][k]+fromArray[j][k-1]+fromArray[j][k+1]==0){
                fromArray[j][k] = 0;
            }
        }
    }
    return fromArray;
}//腐蝕（簡單）

function expand(fromArray){
    for(var j=1;j<fromArray.length-1;j++){
        for(var k=1;k<fromArray[j].length-1;k++){
            if(fromArray[j][k]==0&&fromArray[j-1][k]+fromArray[j+1][k]+fromArray[j][k-1]+fromArray[j][k+1]==4){
                fromArray[j][k] = 1;
            }
        }
    }
    return fromArray;
}//膨脹（簡單）

 

 

由於我們的圖片背景干擾不是很強烈，所以基本看不出差別。不過對於計算機來說，還是有不同的喲～尤其是背景復雜的圖片，這一步很好用。

 

3、切割。

由於我們的圖片內各數字沒有粘連，所以切割時只需要從上至下，從左至右掃描圖片，發現圖片某一豎行均為白色，就切一刀。有粘連的驗證碼比較困難，暫時不討論了。參考代碼：

function split(fromArray,count){
    var numNow = 0;
    var status = false;
    var w = fromArray[0].length;
    for(var k=0;k<w;k++) {//遍歷圖像
        var sumUp = 0;
        for (var j=0;j<fromArray.length;j++) //檢測整列是否有圖像
            sumUp += fromArray[j][k];
        if(sumUp == 0){//切割
            for (j=0;j<fromArray.length-1;j++)
                fromArray[j].remove(k);
            w --;
            k --;
            status = false;
            continue;
        }
        else{//切換狀態
            if(!status)
                numNow ++;
            status = true;
        }
        if(numNow!=count){//不是想要的數字
            for (j=0;j<fromArray.length-1;j++)
                fromArray[j].remove(k);
            w --;
            k --;
        }
    }
    return fromArray;
}//切割，獲取特定數字

 

切割后，左右的空白因為都被切了，就沒有了。但是上下仍然存在空白，所以進行處理。這里比較簡單，就不放代碼了，思路和切割類似，但簡單很多。

 

4、旋轉、縮放。

其實旋轉不是必要的。沒有旋轉的步驟，可以用更多的數據量訓練來彌補。同理，縮放也不是必須的。先大致講一下思路：旋轉和縮放都再次利用了canvas，將圖片畫上去之后，利用canvas的方法操作圖片旋轉或縮放，之后再把數據拿下來，就像我們最開始讀圖片時做的一樣。旋轉時，取順時針逆時針各90度，取左右寬度最窄的角度，當作數字站立的旋轉角度。縮放時，直接按預設長寬畫圖即可。這里我就只寫了縮放。處理后再轉換回數組形式。參考代碼：

function zoomToFit(fromArray){
    var imgD = fromXY(fromArray);
    var w = lastWidth;
    var h = lastHeight;
    var tempc1 = document.createElement("canvas");
    var tempc2 = document.createElement("canvas");
    tempc1.width = fromArray[0].length;
    tempc1.height = fromArray.length;
    tempc2.width = w;
    tempc2.height = h;
    var tempt1 = tempc1.getContext("2d");
    var tempt2 = tempc2.getContext("2d");
    tempt1.putImageData(imgD,0,0,0,0,tempc1.width,tempc1.height);
    tempt2.drawImage(tempc1,0,0,w,h);
    var returnImageD = tempt2.getImageData(0,0,WIDTH,HEIGHT);
    fromArray = toXY(returnImageD);
    fromArray.length = h;
    for(var i=0;i<h;i++)
        fromArray[i].length = w;
    return fromArray;
}//尺寸歸一化

 

處理后效果如圖：

 

四、記錄處理后的單個數字的二值化數據，並人工錄入真實數字。

到這里，圖像處理就搞定了，后面的工作就比較簡單了。我們把上一步得到的數組和真實的數字一起保存起來。這個過程可以有很多方法。我當時采取了大家一起錄入的方式，所以搭建了PHP+MySQL的服務器，用數據庫存儲。這塊就不詳述了，大家各顯神威。

 

五、重復訓練

為了方便訓練，我直接在頁面里增加了手動輸入的地方，提交后刷新驗證碼，繼續提交。提交20個驗證碼（20*4=80個數字）后，便經常可以正確識別出4位驗證碼，在單個數字的數據量在300左右時（大約需要300/4=75個驗證碼），識別效率已經在95%以上。在500左右時已經基本見不到錯誤識別的情況了，這時候已經可以寫代碼實現自我訓練了。此時識別一次大約需要0.06秒。

 

六、識別時，用處理后的圖像與庫中數據對比，取得最相近的數據，得到真實數字。

這塊也比較簡單。訓練完成后，我將數據庫數據導出，保存成了一個大的數組，直接用js就可以讀了。識別時遍歷所有的數據，按像素點逐一比較。由於尺寸做了歸一化，所以直接數有多少像素匹配即可。匹配數量最多的即為識別出的結果。我只找到了最開始寫的PHP代碼，先放一下吧，有點懶得再寫js了…：

function check($str)
{
    $str = str_split($str,1);
    $length = count($str);
    $tempNum = 0;
    $tempSimmiar = 0;
    $query = "SELECT * FROM numkeys";
    $sth = execSql($query);
    while ($RES = $sth->fetch()) {
        $thisSimmiar = 0;
        $thisFeature = str_split($RES["feature"],1);
        $thisNum = $RES["resultnum"];
        for($i=0;$i<$length;$i++){
            if($thisFeature[$i]==$str[$i]){
                $thisSimmiar ++;
            }
        }
        if($thisSimmiar>$tempSimmiar){
            $tempSimmiar = $thisSimmiar;
            $tempNum = $thisNum;
        }
    }
    return $tempNum;
}

 

 

七、優化部分

這塊就大家自己看着來吧，因為我的圖片不是很復雜，數據量也不是很大（千條級別），所以也沒啥優化的必要，每次識別大約0.1秒吧。所以我只是沒事干，做了之前大綱里寫了那兩個優化。其實我感覺主要的優化方向還是圖像處理那塊，盡量減少干擾，才能提高效率，也能檢測更復雜的驗證碼。

 

PS：訓練和識別的接口：

訓練：POST發送username（用戶名）、password（密碼）、n1（第一個數組）、n2、n3

、n4、num（真實四位字符）至http://www.leonszone.cn/test/yanzhengma/train.php。參考代碼：

function sendData() {
    var str = prompt("請輸入驗證碼:", "");
    if(!str)
        return false;
    postData = {//整合數據包
        username: 'pdgzfx',
        password: 'pdgzfx',
        nums: str,
        n1: numsArray[0],
        n2: numsArray[1],
        n3: numsArray[2],
        n4: numsArray[3]
    };
    $.ajax({
        url: 'http://www.leonszone.cn/test/yanzhengma/train.php',
        type: 'POST',
        data: postData,
        success: function (data) {
            console.log(data);
            setTimeout(function () {
                location.reload();
            },1000);
        }
    });
}

 

識別：POST發送username（用戶名）、password（密碼）、n1（第一個數組）、n2、n3、n4至http://www.leonszone.cn/test/yanzhengma/check.php。參考代碼：

function getData() {
    postData = {//整合數據包
        username: 'pdgzfx',
        password: 'pdgzfx',
        nums: 'help!!!',
        n1: numsArray[0],
        n2: numsArray[1],
        n3: numsArray[2],
        n4: numsArray[3]
    };
    $.ajax({
        url: 'http://www.leonszone.cn/test/yanzhengma/check.php',
        type: 'POST',
        data: postData,
        success: function (data) {
            $("#Vercode").val(data);
            console.log(data);
        }
    });
}

 

注冊用戶名密碼（防止大家的庫混淆）：POST或GET發送username（用戶名）、password（密碼）至http://www.leonszone.cn/test/yanzhengma/regist.php。參考代碼：

function getData() {
    postData = {//整合數據包
        username: 'pdgzfx',
        password: 'pdgzfx',
        };
    $.ajax({
        url: 'http://www.leonszone.cn/test/yanzhengma/regist.php',
        type: 'POST',
        data: postData,
        success: function (data) { 
            console.log(data); } }); }

 

或直接瀏覽器訪問：http://www.leonszone.cn/test/yanzhengma/regist.php?username= 你的用戶名 &password=你的密碼

轉自https://zhuanlan.zhihu.com/p/28483558