騰訊 IVWEB 團隊：前端識別驗證碼思路分析

騰訊雲加社群發表於2017-04-28
Web前端

騰訊雲技術社群-掘金主頁持續為大家呈現雲端計算技術文章，歡迎大家關注！

作者：莫卓穎

相信很多前端同學對於二維碼識別、影象對比等這類高大上的影象識別技術望而生畏，覺得此類識別技術只能通過更加底倉的高階語言才能實現（諸如c等），本文試圖從前端的角度出發介紹如何通過canvas來進行簡單的影象識別。

canvas是什麼

    canvas是HTML5中的新元素，你可以使用javascript用它來繪製圖形、圖示、以及其它任何視覺性影象複製程式碼

canvas圖片處理運用

對於canvas來說，主要是兩個方法對圖片處理比較重要，一個是通過html5 canvas的 getImageData 方法獲取圖片的畫素資訊，可以很方便的通過方法匯入到把網路圖片或者本地的圖片匯入至canvas中並獲取圖片的畫素資訊，可以修改畫素資訊後通過另外一個重要的方法putImageData匯出處理後的圖片。

1、獲取canvas呼叫
    var c = document.createElement('canvas');
    context = c.getContext('2d');複製程式碼
2、獲取匯入影象資訊
var hiddenImage = new Image();
    hiddenImage.src=圖片地址
     context .drawImage(hiddenImage, 0, 0, width, height);
       hiddenImage .onload=function(){
        context.putImageData(hiddenImage, 0, 0);
    }複製程式碼
3、獲取圖片的畫素資訊
 var imageData = context.getImageData(0, 0, w, h);
//注意這個獲取的是陣列，注意每1個畫素由陣列的4個元素組成，四個元素分別程式碼四個通道r/g/b/a的值
for(var j=0;j<hiddenImage.height;j+=1){
    for(var i=0;i<hiddenImage.width;i+=1){
 //注意這裡獲取圖片資訊後可以進行定製化處理
            offset=4*(hiddenImage.width*j+i);
            var red = sourceImageData[offset];
            var green = sourceImageData[offset + 1];
            var blue = sourceImageData[offset + 2];
            var brightness = getBrightness(red,green,blue);

    }
  }
  function getBrightness(r,g,b){
        return 0.3*r + 0.59*g + 0.11*b;
    }複製程式碼
4、匯出處理過的圖片
context.putImageData(第三步處理過得畫素資訊,0,0);複製程式碼

二維碼識別思路

1、設計一個自動等分切割圖片的canvas
程式（利用canvas匯出原圖的二進位制陣列，然後等分陣列後出單個圖片的序列庫）

2、簡單做個爬蟲程式，利用步驟1完成的程式到需要識別的網站下載該網站的二維碼序列相簿

3、手工翻譯二維碼序列相簿對應的真實含義，並建立圖片到真實含義的map表。

4、設計自動圖片識別程式，匯入需要識別的原二維碼後，按照1的步驟進行等分，分別拿等分後的圖片依次對比步驟2獲取的相簿，對比出對比度最接近的圖片，然後通過步驟三翻譯出來的map
表獲取對應圖片的真實含義

好了，授人以魚不如授人以漁，通過前端進行做壞事的方法告訴你了，如何發揚光大就看你的靈活運用。

後記

相信在很多人眼中， 前端僅僅是一門簡單的處理網頁互動、樣式門面學科。隨著h5、node等前端新技術的流行，前端不再是功能有限的學科，而是功能強大到只有你想不到木有做不到地步。

原文連結：ivweb.io/topic/56379…

相關推薦
【騰訊TMQ】看圖測試指南——影象識別在測試中的應用
前端開發框架簡介:angular和react
永珍優圖CI：圖片內容識別、人臉識別

此文已由作者授權騰訊雲技術社群釋出，轉載請註明文章出處
原文連結：www.qcloud.com/community/a…
獲取更多騰訊海量技術實踐乾貨，歡迎大家前往騰訊雲技術社群

相關文章