JavaScript實(shí)現(xiàn)圖形驗(yàn)證碼完整代碼
更新時(shí)間：2024年01月25日 16:06:20 作者：T3165919332
很多小伙伴都在學(xué)習(xí)JavaScript,可能也會有老師提出這樣一個(gè)問題,如何用js編寫一個(gè)簡單的驗(yàn)證碼,這里就和大家分享一下,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)圖形驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下
圖形驗(yàn)證碼起什么作用：
可以防止：惡意破解密碼、刷票、論壇灌水，有效防止某個(gè)黑客對某一個(gè)特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登錄嘗試。
驗(yàn)證碼一般是防止批量注冊的，人眼看起來都費(fèi)勁，何況是機(jī)器。不少網(wǎng)站為了防止用戶利用機(jī)器人自動注冊、登錄、灌水，都采用了驗(yàn)證碼技術(shù)。所謂驗(yàn)證碼，就是將一串隨機(jī)產(chǎn)生的數(shù)字或符號，生成一幅圖片， 圖片里加上一些干擾。
例如隨機(jī)畫數(shù)條直線，畫一些點(diǎn)（防止OCR），由用戶肉眼識別其中的驗(yàn)證碼信息，輸入表單提交網(wǎng)站驗(yàn)證，驗(yàn)證成功后才能使用某項(xiàng)功能。
怎么實(shí)現(xiàn)圖形驗(yàn)證碼
原理：
1. 創(chuàng)建canvas元素,設(shè)置寬高等參數(shù)
2. 在canvas上繪制復(fù)雜的背景和前景噪點(diǎn)干擾線,增加識別難度
3. 隨機(jī)生成數(shù)字/字母,通過旋轉(zhuǎn)、移動、變形來繪制文本
4. 繪制完成后,把生成的驗(yàn)證碼保存在實(shí)例的code屬性中
5. 用戶輸入驗(yàn)證碼與code屬性中的值進(jìn)行對比驗(yàn)證
6. 驗(yàn)證失敗則重新生成驗(yàn)證碼圖形和code值
具體來看,主要步驟是:
- 初始化時(shí)設(shè)置canvas參數(shù),定義文本字符數(shù)組
- refresh方法用來生成驗(yàn)證碼圖形 - 繪制背景色和矩形框
- - 隨機(jī)生成文字,設(shè)置樣式并旋轉(zhuǎn)繪制
- - 繪制干擾線和噪點(diǎn)
- validate方法用來比對用戶輸入和驗(yàn)證碼的值
- 調(diào)用refresh重新生成驗(yàn)證碼圖形captcha的安全性就在于背景干擾線、噪點(diǎn)以及文字扭曲變形,使機(jī)器無法準(zhǔn)確識別文字。同時(shí)驗(yàn)證碼的值保存在內(nèi)存中,不存入數(shù)據(jù)庫,驗(yàn)證后即被清除,保證了每次都是新的驗(yàn)證碼。這就是一個(gè)典型的前端圖形驗(yàn)證碼實(shí)現(xiàn)的基本流程和原理?？梢愿鶕?jù)需要對驗(yàn)證碼樣式、文字、長度等進(jìn)行自定義。
代碼：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖形驗(yàn)證碼</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="請輸入驗(yàn)證碼"/>
<button id="my_button">驗(yàn)證</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("驗(yàn)證正確");
}else{
alert("驗(yàn)證碼錯誤");
}
}
</script>
</html>js
!(function(window, document) {
function GVerify(options) { //創(chuàng)建一個(gè)圖形驗(yàn)證碼對象，接收options對象為參數(shù)
this.options = { //默認(rèn)options參數(shù)值
id: "", //容器Id
canvasId: "verifyCanvas", //canvas的ID
width: "100", //默認(rèn)canvas寬度
height: "30", //默認(rèn)canvas高度
type: "blend", //圖形驗(yàn)證碼默認(rèn)類型blend:數(shù)字字母混合類型、number:純數(shù)字、letter:純字母
code: ""
}
if(Object.prototype.toString.call(options) == "[object Object]"){//判斷傳入?yún)?shù)類型
for(var i in options) { //根據(jù)傳入的參數(shù)，修改默認(rèn)參數(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();
}
},
/**生成驗(yàn)證碼**/
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") { //判斷驗(yàn)證碼類型
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'; //隨機(jī)生成字體大小
ctx.fillStyle = randomColor(50, 160); //隨機(jī)生成字體顏色
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);
/**設(shè)置旋轉(zhuǎn)角度和坐標(biāo)原點(diǎn)**/
ctx.translate(x, y);
ctx.rotate(deg * Math.PI / 180);
ctx.fillText(txt, 0, 0);
/**恢復(fù)旋轉(zhuǎn)角度和坐標(biāo)原點(diǎ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();
}
/**繪制干擾點(diǎn)**/
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();
}
},
/**驗(yàn)證驗(yàn)證碼**/
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(",");
}
/**生成一個(gè)隨機(jī)數(shù)**/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**生成一個(gè)隨機(jī)色**/
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é)
到此這篇關(guān)于JavaScript實(shí)現(xiàn)圖形驗(yàn)證碼的文章就介紹到這了,更多相關(guān)js實(shí)現(xiàn)圖形驗(yàn)證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用JS操作文件(FileReader讀取--node的fs)
這篇文章主要介紹了使用JS操作文件(FileReader讀取--node的fs)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-12-12
js實(shí)現(xiàn)按鈕控制帶有停頓效果的圖片滾動
這篇文章主要介紹了js實(shí)現(xiàn)按鈕控制帶有停頓效果的圖片滾動，，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
function, new function, new Function之間的區(qū)別
function, new function, new Function之間的區(qū)別...2007-03-03
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)兩周內(nèi)自動登錄功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
當(dāng)需要制作轉(zhuǎn)動鼠標(biāo)滾輪放大頁面字體這樣的交互效果時(shí)，會用到 Mousewheel 事件。2010-09-09
javascript的propertyIsEnumerable()方法使用介紹
propertyIsEnumerable()是用來檢測屬性是否屬于某個(gè)對象的,如果檢測到了,返回true,否則返回false，下面為大家介紹下其具體的使用2014-04-04
這篇文章主要介紹了微信小程序使用audio組件播放音樂功能,結(jié)合實(shí)例形式分析了微信小程序audio組件播放在線音樂相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JS自帶一套內(nèi)存管理引擎,負(fù)責(zé)創(chuàng)建對象、銷毀對象,以及垃圾回收,下面這篇文章主要給大家介紹了關(guān)于JavaScript垃圾回收機(jī)制的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
詳細(xì)分析Javascript中創(chuàng)建對象的四種方式
這篇文章詳細(xì)介紹了Javascript中創(chuàng)建對象的幾種方式與每種方式的優(yōu)缺點(diǎn)，其中包括工廠模式、構(gòu)造函數(shù)模式、原型模式和組合使用構(gòu)造函數(shù)模式和原型模式，有需要的小伙伴們一起來學(xué)習(xí)學(xué)習(xí)吧。2016-08-08
最近微信小程序?qū)τ趯徍诵〕绦蛱岢隽藥в衱x.login、wx.getUserInfo接口的調(diào)整，并提出了一個(gè)新的接口供開發(fā)者調(diào)用，本文就詳細(xì)的介紹一下如何使用，感興趣的可以了解一下2021-06-06