JS隨手記——圖片驗證碼

參考原帖：HTML+js圖片驗證碼編寫

目標需求

實現圖片驗證碼的生成以及對輸入文本和圖片驗證碼的文本進行對比判斷。

分析

通過生成隨機數來取字母數字數組的項，再通過添加線和點模仿打亂的效果，通過隨機數賦予RGB生成隨機顏色。

具體實現

HTML部分代碼

分別爲輸入框，圖形容器，和提示框。

			<input type="text" placeholder="請輸入驗證碼(區分大小寫)" id="code" onchange="checkCode()" />
			<canvas id="canvas" onclick="Refresh()"></canvas>
			<div id="codeerror"></div>

初始化數組

因爲最後需要將輸入框中的值與生成的值進行對比，所以此數組要定義爲全局變量。

			var show_num = []; //初始化驗證碼數組

繪製方法

			function draw(show_num) {
				var canvas_width = document.getElementById("canvas").clientWidth;
				var canvas_height = document.getElementById("canvas").clientHeight;
				var canvas = document.getElementById("canvas");
				var context = canvas.getContext("2d");
				canvas.width = canvas_width;
				canvas.height = canvas_height;
				var sCode =
					"A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
				var aCode = sCode.split(","); //通過逗號將上述字符串分割爲數組

				for (var i = 0; i <= 3; i++) {
					var deg = Math.random() * 30 * Math.PI / 180; //產生0~30之間的隨機弧度
					var txt = aCode[Math.floor(Math.random() * aCode.length)]; //獲取一個數組中的隨機項
					show_num[i] = txt;
					var x = 10 + i * 20; //文本在canvas上的x座標
					var y = 20 + Math.random() * 8; //文本在canvas上的y座標
					context.font = "bold 23px 微軟雅黑";
					context.translate(x, y);
					context.rotate(deg);
					context.fillStyle = randomColor();
					context.fillText(txt, 0, 0);
					context.rotate(-deg);
					context.translate(-x, -y);
				}
				for (var i = 0; i <= 5; i++) {
					//添加線條
					context.strokeStyle = randomColor();
					context.beginPath();
					context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.stroke();
				}
				for (var i = 0; i <= 30; i++) {
					//添加亂點
					context.strokeStyle = randomColor();
					context.beginPath();
					var x = Math.random() * canvas_width;
					var y = Math.random() * canvas_height;
					context.moveTo(x, y);
					context.lineTo(x + 1, y + 1);
					context.stroke();
				}
			}

隨機顏色方法

			function randomColor() {
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return "rgb(" + r + "," + g + "," + b + ")";
			}

輸入驗證方法

			function checkCode() {
				var val = document.getElementById("code").value;
				var num = show_num.join("");
				if (val == '') {
					document.getElementById("codeerror").innerHTML = "❌請輸入驗證碼";
					document.getElementById("codeerror").style.color = "red";
					return false;
				} else if (val == num) {
					document.getElementById("codeerror").style.visibility = "hidden";
					return true;
				} else {
					document.getElementById("codeerror").innerHTML = "❌輸入的驗證碼不正確(區分大小寫),看不清可以點擊驗證碼刷新";
					document.getElementById("codeerror").style.color = "red";
					return false;
				}
			}

刷新方法

其實單點擊控件刷新的話，不需要再加此方法，由於window.onload = draw(show_num);無法實現加載後展示的效果，所以添加此方法。

			function Refresh(){
				draw(show_num);
			}

加載事件

			window.onload = Refresh;

最終效果

當然了，如果你不想區分大小寫的話，可以把兩個字符串都全部轉化爲小寫，再進行對比。

結語

僅作記錄，不足之處，望見諒。