利用html5 canvas破解簡單驗證碼及getImageData接口應用_HTML5教程
推薦：HTML5之SVG 2D入門11—用戶交互性(動畫)介紹及應用SVG擁有良好的用戶交互性：SVG能響應大部分的DOM2事件,SVG能通過cursor良好的捕捉用戶鼠標的移動等等，感興趣的朋友可以了解下啊，或許本文對你學習動畫有所幫助
敝校的教務管理系統（貌似不止我們學校用呢），一到選課時間服務器各種崩不解釋，有時為了選個課就要反復輸入驗證碼，一想到千千萬萬的大學生把時間浪費在輸入驗證碼上面，我就覺得，我有義務拯救一下人類。搜了一下，看到這篇文章，3年前的文章了。我參考了前半部分，借助TamperMonkey這個插件，大概實現了想要的效果�？梢栽赨serscript獲取這個腳本，GitHub上面也有，代碼寫得丑，求debug，求指教。
說下思路：HTML 5中的canvas有個接口getImageData可以用來從驗證碼圖像中取得像素數據。每一個像素有對應r,g,b,a四個值，r,g,b是紅綠藍三色，a是透明度。
觀察到教務管理系統的驗證碼是5個數字，字體字號大小都不變，而且雖然背景雖然有干擾，但是很明顯跟字體顏色有很大區別，所以就用了一個很粗糙的方法：我們知道，顏色越淺，rgb值越大，顏色越深，rgb值越少。于是我對每一個像素點進行判斷，rgb的和小于350（這個值是測出來的）的就是屬于字體的像素，為了方便觀察，把它的rgb值都設置為255，否則設置為0。這樣就獲得了一個黑底白字的圖片了。
復制代碼 代碼如下:www.zhaotila.cn
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;
}
}
}
然后我用畫圖工具放大圖片，觀察了一下，得出每個數字是一個12*8像素的矩形，再之后就求出每一個數字對應的像素個數，發現0和8還有6和9的像素個數是一樣的，就進行一下特判（比如正中間有像素的就肯定是8而不是0了）。然后……還是觀察一下……每個數字對應的矩陣的坐標……寫出這個函數：
復制代碼 代碼如下:www.zhaotila.cn
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;
}
}
原文用了神經網絡來判斷，準確率大大提高，我不會用，所以就沒用了……
我用這個方法獲得的驗證碼準確率也有95%以上，暫時夠用了。有空再研究一下神經網絡好了。
有需要的同學可以拿去用，Chrome瀏覽器要先裝TamperMonkey，Firefox則是GeaseMonkey，然后安裝這個腳本就ok了。
分享：HTML5之SVG 2D入門4—筆畫與填充顏色處理，也就是填充和邊框效果；你會發現這里的內容與canvas基本上是一致的。這些屬性既可以以屬性的形式寫在元素中，也可以以CSS的形式保存,這是與canvas不一樣的地方
相關HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發的過程介紹
- HTML5 對各個標簽的定義與規定：body的介紹
- 關于HTML5的安全問題開發人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數據庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
- 相關鏈接：
- 教程說明：
HTML5教程-利用html5 canvas破解簡單驗證碼及getImageData接口應用
。