JavaScript實現(xiàn)圖形驗證碼完整代碼
更新時間：2024年01月25日 16:06:20 作者：T3165919332
很多小伙伴都在學習JavaScript,可能也會有老師提出這樣一個問題,如何用js編寫一個簡單的驗證碼,這里就和大家分享一下,這篇文章主要給大家介紹了關于JavaScript實現(xiàn)圖形驗證碼的相關資料,需要的朋友可以參考下
圖形驗證碼起什么作用：
可以防止：惡意破解密碼、刷票、論壇灌水，有效防止某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。
驗證碼一般是防止批量注冊的，人眼看起來都費勁，何況是機器。不少網(wǎng)站為了防止用戶利用機器人自動注冊、登錄、灌水，都采用了驗證碼技術。所謂驗證碼，就是將一串隨機產(chǎn)生的數(shù)字或符號，生成一幅圖片， 圖片里加上一些干擾。
例如隨機畫數(shù)條直線，畫一些點（防止OCR），由用戶肉眼識別其中的驗證碼信息，輸入表單提交網(wǎng)站驗證，驗證成功后才能使用某項功能。
怎么實現(xiàn)圖形驗證碼
原理：
1. 創(chuàng)建canvas元素,設置寬高等參數(shù)
2. 在canvas上繪制復雜的背景和前景噪點干擾線,增加識別難度
3. 隨機生成數(shù)字/字母,通過旋轉(zhuǎn)、移動、變形來繪制文本
4. 繪制完成后,把生成的驗證碼保存在實例的code屬性中
5. 用戶輸入驗證碼與code屬性中的值進行對比驗證
6. 驗證失敗則重新生成驗證碼圖形和code值
具體來看,主要步驟是:
- 初始化時設置canvas參數(shù),定義文本字符數(shù)組
- refresh方法用來生成驗證碼圖形 - 繪制背景色和矩形框
- - 隨機生成文字,設置樣式并旋轉(zhuǎn)繪制
- - 繪制干擾線和噪點
- validate方法用來比對用戶輸入和驗證碼的值
- 調(diào)用refresh重新生成驗證碼圖形captcha的安全性就在于背景干擾線、噪點以及文字扭曲變形,使機器無法準確識別文字。同時驗證碼的值保存在內(nèi)存中,不存入數(shù)據(jù)庫,驗證后即被清除,保證了每次都是新的驗證碼。這就是一個典型的前端圖形驗證碼實現(xiàn)的基本流程和原理?？梢愿鶕?jù)需要對驗證碼樣式、文字、長度等進行自定義。
代碼：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖形驗證碼</title>
</head>
<style>
#app{
margin-top: 160px;
width: 500px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid pink;
}
#my_body{
width: 200px;
display: flex;
align-items: center;
justify-content: space-between;
}
#code_input{
width: 120px;
height: 20px;
line-height: 20px;
}
#code_input:focus {
outline: 0;
}
#my_button{
width: 50px;
height: 24px;
}
#v_container{
margin-bottom: 50px;
width: 200px;
height: 50px;
}
</style>
<body>
<div id="app">
<div id="v_container" ></div>
<div id="my_body">
<input type="text" id="code_input" value="" placeholder="請輸入驗證碼"/>
<button id="my_button">驗證</button>
</div>
</div>
</body>
<script src="gVerify.js"></script>
<script>
var verifyCode = new GVerify("v_container");
document.getElementById("my_button").onclick = function(){
var res = verifyCode.validate(document.getElementById("code_input").value);
if(res){
alert("驗證正確");
}else{
alert("驗證碼錯誤");
}
}
</script>
</html>js
!(function(window, document) {
function GVerify(options) { //創(chuàng)建一個圖形驗證碼對象，接收options對象為參數(shù)
this.options = { //默認options參數(shù)值
id: "", //容器Id
canvasId: "verifyCanvas", //canvas的ID
width: "100", //默認canvas寬度
height: "30", //默認canvas高度
type: "blend", //圖形驗證碼默認類型blend:數(shù)字字母混合類型、number:純數(shù)字、letter:純字母
code: ""
}
if(Object.prototype.toString.call(options) == "[object Object]"){//判斷傳入?yún)?shù)類型
for(var i in options) { //根據(jù)傳入的參數(shù)，修改默認參數(shù)值
this.options[i] = options[i];
}
}else{
this.options.id = options;
}
this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
this.options.letterArr = getAllLetter();
this._init();
this.refresh();
}
GVerify.prototype = {
/**版本號**/
version: '1.0.0',
/**初始化方法**/
_init: function() {
var con = document.getElementById(this.options.id);
var canvas = document.createElement("canvas");
this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
canvas.id = this.options.canvasId;
canvas.width = this.options.width;
canvas.height = this.options.height;
canvas.style.cursor = "pointer";
canvas.innerHTML = "您的瀏覽器版本不支持canvas";
con.appendChild(canvas);
var parent = this;
canvas.onclick = function(){
parent.refresh();
}
},
/**生成驗證碼**/
refresh: function() {
this.options.code = "";
var canvas = document.getElementById(this.options.canvasId);
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
}else{
return;
}
ctx.textBaseline = "middle";
ctx.fillStyle = randomColor(180, 240);
ctx.fillRect(0, 0, this.options.width, this.options.height);
if(this.options.type == "blend") { //判斷驗證碼類型
var txtArr = this.options.numArr.concat(this.options.letterArr);
} else if(this.options.type == "number") {
var txtArr = this.options.numArr;
} else {
var txtArr = this.options.letterArr;
}
for(var i = 1; i <= 4; i++) {
var txt = txtArr[randomNum(0, txtArr.length)];
this.options.code += txt;
ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //隨機生成字體大小
ctx.fillStyle = randomColor(50, 160); //隨機生成字體顏色
ctx.shadowOffsetX = randomNum(-3, 3);
ctx.shadowOffsetY = randomNum(-3, 3);
ctx.shadowBlur = randomNum(-3, 3);
ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
var x = this.options.width / 5 * i;
var y = this.options.height / 2;
var deg = randomNum(-30, 30);
/**設置旋轉(zhuǎn)角度和坐標原點**/
ctx.translate(x, y);
ctx.rotate(deg * Math.PI / 180);
ctx.fillText(txt, 0, 0);
/**恢復旋轉(zhuǎn)角度和坐標原點**/
ctx.rotate(-deg * Math.PI / 180);
ctx.translate(-x, -y);
}
/**繪制干擾線**/
for(var i = 0; i < 4; i++) {
ctx.strokeStyle = randomColor(40, 180);
ctx.beginPath();
ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
ctx.stroke();
}
/**繪制干擾點**/
for(var i = 0; i < this.options.width/4; i++) {
ctx.fillStyle = randomColor(0, 255);
ctx.beginPath();
ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
ctx.fill();
}
},
/**驗證驗證碼**/
validate: function(code){
var code = code.toLowerCase();
var v_code = this.options.code.toLowerCase();
console.log(v_code);
if(code == v_code){
return true;
}else{
this.refresh();
return false;
}
}
}
/**生成字母數(shù)組**/
function getAllLetter() {
var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
return letterStr.split(",");
}
/**生成一個隨機數(shù)**/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**生成一個隨機色**/
function randomColor(min, max) {
var r = randomNum(min, max);
var g = randomNum(min, max);
var b = randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
window.GVerify = GVerify;
})(window, document);效果：
總結(jié)
到此這篇關于JavaScript實現(xiàn)圖形驗證碼的文章就介紹到這了,更多相關js實現(xiàn)圖形驗證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用JS操作文件(FileReader讀取--node的fs)
這篇文章主要介紹了使用JS操作文件(FileReader讀取--node的fs)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-12-12
這篇文章主要介紹了js實現(xiàn)按鈕控制帶有停頓效果的圖片滾動，，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
function, new function, new Function之間的區(qū)別
function, new function, new Function之間的區(qū)別...2007-03-03
這篇文章主要為大家詳細介紹了JS實現(xiàn)兩周內(nèi)自動登錄功能的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
當需要制作轉(zhuǎn)動鼠標滾輪放大頁面字體這樣的交互效果時，會用到 Mousewheel 事件。2010-09-09
javascript的propertyIsEnumerable()方法使用介紹
propertyIsEnumerable()是用來檢測屬性是否屬于某個對象的,如果檢測到了,返回true,否則返回false，下面為大家介紹下其具體的使用2014-04-04
這篇文章主要介紹了微信小程序使用audio組件播放音樂功能,結(jié)合實例形式分析了微信小程序audio組件播放在線音樂相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JS自帶一套內(nèi)存管理引擎,負責創(chuàng)建對象、銷毀對象,以及垃圾回收,下面這篇文章主要給大家介紹了關于JavaScript垃圾回收機制的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
詳細分析Javascript中創(chuàng)建對象的四種方式
這篇文章詳細介紹了Javascript中創(chuàng)建對象的幾種方式與每種方式的優(yōu)缺點，其中包括工廠模式、構(gòu)造函數(shù)模式、原型模式和組合使用構(gòu)造函數(shù)模式和原型模式，有需要的小伙伴們一起來學習學習吧。2016-08-08
最近微信小程序?qū)τ趯徍诵〕绦蛱岢隽藥в衱x.login、wx.getUserInfo接口的調(diào)整，并提出了一個新的接口供開發(fā)者調(diào)用，本文就詳細的介紹一下如何使用，感興趣的可以了解一下2021-06-06