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

時間 2019-11-16

原文原文鏈接

騰訊雲技術社區-掘金主頁持續爲你們呈現雲計算技術文章，歡迎你們關注！javascript

做者：莫卓穎html

相信不少前端同窗對於二維碼識別、圖像對比等這類高大上的圖像識別技術望而生畏，以爲此類識別技術只能經過更加底倉的高級語言才能實現（諸如c等），本文試圖從前端的角度出發介紹如何經過canvas來進行簡單的圖像識別。前端

canvas是什麼

canvas是HTML5中的新元素，你可使用javascript用它來繪製圖形、圖標、以及其它任何視覺性圖像複製代碼

canvas圖片處理運用

對於canvas來講，主要是兩個方法對圖片處理比較重要，一個是經過html5 canvas的 getImageData 方法獲取圖片的像素信息，能夠很方便的經過方法導入到把網絡圖片或者本地的圖片導入至canvas中並獲取圖片的像素信息，能夠修改像素信息後經過另一個重要的方法putImageData導出處理後的圖片。html5

一、獲取canvas調用

var c = document.createElement('canvas');
    context = c.getContext('2d');複製代碼

二、獲取導入圖像信息

var hiddenImage = new Image();
    hiddenImage.src=圖片地址
     context .drawImage(hiddenImage, 0, 0, width, height);
       hiddenImage .onload=function(){
        context.putImageData(hiddenImage, 0, 0);
    }複製代碼

三、獲取圖片的像素信息

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;
    }複製代碼

四、導出處理過的圖片

context.putImageData(第三步處理過得像素信息,0,0);複製代碼

二維碼識別思路

一、設計一個自動等分切割圖片的canvas
程序（利用canvas導出原圖的二進制數組，而後等分數組後出單個圖片的序列庫）

二、簡單作個爬蟲程序，利用步驟1完成的程序到須要識別的網站下載該網站的二維碼序列圖庫

三、手工翻譯二維碼序列圖庫對應的真實含義，並創建圖片到真實含義的map表。

四、設計自動圖片識別程序，導入須要識別的原二維碼後，按照1的步驟進行等分，分別拿等分後的圖片依次對比步驟2獲取的圖庫，對比出對比度最接近的圖片，而後經過步驟三翻譯出來的map
表獲取對應圖片的真實含義java

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