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;

最终效果

当然了，如果你不想区分大小写的话，可以把两个字符串都全部转化为小写，再进行对比。

结语

仅作记录，不足之处，望见谅。