JavaScript实现图片验证码

YSF_

于 2024-07-12 14:34:55 发布

阅读量592

点赞数 6

CC 4.0 BY-SA版权

分类专栏： JavaScript HTML 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/hacker34567/article/details/140378370

JavaScript 同时被 2 个专栏收录

6 篇文章

订阅专栏

HTML

3 篇文章

订阅专栏

Captcha.js

/* Captcha.js v1.0.0 | This code is licensed under the GNU GPL License (GNU). */
!function(t,i){function o(t){if(this.options={id:"",canvasId:"verifyCanvas",width:"100",height:"30",type:"blend",code:""},"[object Object]"==Object.prototype.toString.call(t))for(var i in t)this.options[i]=t[i];else this.options.id=t;this.options.numArr="0,1,2,3,4,5,6,7,8,9".split(","),this.options.letterArr="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".split(","),this._init(),this.refresh()}function s(t,i){return Math.floor(Math.random()*(i-t)+t)}function e(t,i){return"rgb("+s(t,i)+","+s(t,i)+","+s(t,i)+")"}o.prototype={version:"1.0.0",_init:function(){var t=i.getElementById(this.options.id),o=i.createElement("canvas");this.options.width=t.offsetWidth>0?t.offsetWidth:"100",this.options.height=t.offsetHeight>0?t.offsetHeight:"30",o.id=this.options.canvasId,o.width=this.options.width,o.height=this.options.height,o.style.cursor="pointer",o.innerHTML="Your browser doesn't support canvas",t.appendChild(o);var s=this;o.onclick=function(){s.refresh()}},refresh:function(){this.options.code="";var t=i.getElementById(this.options.canvasId);if(t.getContext){var o=t.getContext("2d");if(o.textBaseline="middle",o.fillStyle=e(180,240),o.fillRect(0,0,this.options.width,this.options.height),"blend"==this.options.type)var n=this.options.numArr.concat(this.options.letterArr);else n="number"==this.options.type?this.options.numArr:this.options.letterArr;for(var h=1;h<=4;h++){var r=n[s(0,n.length)];this.options.code+=r,o.font=s(this.options.height/2,this.options.height)+"px monospace",o.fillStyle=e(50,160),o.shadowOffsetX=s(-3,3),o.shadowOffsetY=s(-3,3),o.shadowBlur=s(-3,3),o.shadowColor="rgba(0, 0, 0, 0.3)";var a=this.options.width/5*h,p=this.options.height/2,l=s(-30,30);o.translate(a,p),o.rotate(l*Math.PI/180),o.fillText(r,0,0),o.rotate(-l*Math.PI/180),o.translate(-a,-p)}for(h=0;h<4;h++)o.strokeStyle=e(40,180),o.beginPath(),o.moveTo(s(0,this.options.width),s(0,this.options.height)),o.lineTo(s(0,this.options.width),s(0,this.options.height)),o.stroke();for(h=0;h<this.options.width/4;h++)o.fillStyle=e(0,255),o.beginPath(),o.arc(s(0,this.options.width),s(0,this.options.height),1,0,2*Math.PI),o.fill()}},validate:function(t){t=t.toLowerCase();var i=this.options.code.toLowerCase();return console.log(i),t==i||(this.refresh(),!1)}},t.Captcha=o}(window,document);

（其实这玩意是我自己写的）

测试用的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="/src/code/js/Captcha/v1.0.0/code.js"></script>
	<script>
		var verifyCode = new Captcha("v_container");
 
		document.getElementById("my_button").onclick = function(){
			var res = verifyCode.validate(document.getElementById("code_input").value);
			if(res){
				alert("验证正确");
			}else{
				alert("验证码错误");
			}
		}
	</script>
</html>

效果
效果图