canvas——实现图片验证码(功能实现)

墨蓝 2022-08-31 15:29 283阅读 0赞

`canvas`实现图片验证码——效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

## 1.`html`部分代码 ##

<div class="wrapper">
    	<div class="inputBox">
    		<input type="text" class="inp" />
    		<span class="icon"></span>
    	</div>
    	<p class="errorText">验证码错误，请重新输入</p>
    	<div class="box">
    		<canvas id="myCanvas" width="270" height="80"></canvas>
    		<input type="button" class="refresh"/>
    	</div>
    	<button class="submit">submit</button>
    </div>

## 2.`css`部分代码 ##

*{ 
    	margin:0;
    	padding:0;
    }
    .wrapper{ 
    	position:relative;
    	margin:50px auto;
    	width:350px;
    	border:1px solid #ccc;
    	border-radius:15px;
    	padding:20px;
    	box-sizing:border-box;
    }
    .inputBox{ 
    	position:relative;
    }
    .inputBox .inp{ 
    	display:inline-block;
    	width:270px;
    	padding:15px;
    	box-sizing:border-box;
    	border-radius:5px;
    	border:1px solid #ccc;
    	outline:none;
    	margin:10px 0;
    }
    .inputBox .icon{ 
    	display:none;
    	position:absolute;
    	width:32px;
    	height:32px;
    	top:50%;
    	margin-top:-16px;
    	right:0;
    	background:url("./images/true.png");//一个图片样式
    	background-size:100% 100%;
    }
    .errorText{ 
    	display:none;
    	color:red;
    	font-size:12px;
    	margin:15px 0;
    }
    canvas{ 
    	border:1px solid #000;
    	border-radius:5px;
    	background-image:url("./images/bg.jpg");
    }
    .refresh{ 
    	position:absolute;
    	right:10px;
    	top:50%;
    	margin-top:-16px;
    	width:32px;
    	height:32px;
    	background-image:url("./images/update.png");//一个图片样式
    	backgroun-size:100% 100%;
    	border:0;
    	border-radius:5px;
    	cursor:pointer;
    }
    .submit{ 
    	padding:10px 20px;
    	border:0;
    	color:#fff;
    	background:#62b900;
    	border-radius:5px;
    	margin-top:15px;
    	font-size:18px;
    	cursor:pointer;
    	outline:none;
    }

## 3.`demo.js`——非常重要的`js`文件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
根据上图可以看到，在65到122之间，除了91-97之间，其他的都是字母，包含大写和小写字母。

打断一下，上面`String.fromCharCode()`方法，是将大写和小写字母放到`arr`数组中，此时数组的长度为`26*2+10=62`.  
![在这里插入图片描述][6e8f0c5951964d05ba5d48bef5cedfd4.png]  
接上面的`js`:

var canvasStr,valueRight;
    //随机挑选文字内容
    function createCanvas(){ 
    	var len = arr.length;//获取数组的长度
    	canvasStr = "";
    	valueRight = "";
    	//图片验证码随机取arr数组中的6位
    	for(var i=0;i<6;i++){ 
    		var text = arr[Math.floor(Math.random()*len)];//随机取一位
    		canvasStr+=text+' ';
    		valueRight+=text;
    	}
    	//此处的canvasStr就是由数字和字母组成的6位验证码，中间用空格隔开
    	//valueRight是数字和字母组成的6位验证码，没有空格
    	//获取canvas区域
    	var myCanvas = $("#myCanvas")[0];
    	var ctx = myCanvas.getContext('2d');
    	//画线
    	ctx.beginPath();
    	ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
    	ctx.lineWidth = 15;
    	ctx.strokeStyle = "#ccc";
    	ctx.moveTo(Math.floor(Math.random()*50),Math.floor(Math.random()*80));
    	ctx.lineTo(250+Math.floor(Math.random()*30),Math.floor(Math.random()*80));
    	ctx.stroke();
    	ctx.globalCompositeOperation="lighter";
    	ctx.closePath();
    	//将文字写入canvas画布中
    	ctx.save();
    	ctx.beginPath();
    	var x = myCanvas.width/2;
    	ctx.textAlign = "center";
    	ctx.fillStyle = "#ddd";
    	ctx.font="46px Roboto Slab";
    	ctx.setTransform(1,-0.12,0.2,1,0,12);
    	ctx.fillText(canvasStr,x,60);
    	ctx.restore();
    }
    function bindevent(){ 
    	//提交按钮
    	$(".submit").on('click',function(){ 
    		var value = $('.inp').val().trim();
    		//提交内容为空
    		if(!value){ 
    			$('.errorText').show().html("请输入内容");
    			$('.icon').css({ display:'inline-block',backgroundImage:'url("./images/false.png")'});
    		}else{ 
    			//提交内容正确
    			if(value.toLowerCase()==valueRight.toLowerCase()){ 
    				$('.icon').css({ display:'inline-block',backgroundImage:'url("./images/true.png")'});
    				createCanvas();
    			}else{ 
    				$('.errorText').show().html('验证码错误，请重新输入');
    				$('.icon').css({ display:'inline-block',backgroundImage:'url("./images/false.png")'});
    			}
    		}
    	})
    	//更新按钮
    	$('.refresh').on('click',function(){ 
    		createCanvas();
    		$('.errorText').add('.icon')).fadeOut(100);
    	})
    	//重新聚焦使错误提示消失
    	$('.inp').focus(function(){ 
    		$('.errorText').add($('.icon')).fadeOut(100);
    	})
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/e5d01e84a16040bfa3466115a9285717.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/7d3f0bf4dea34b5ab5d2dfcc5b8a2812.png
[6e8f0c5951964d05ba5d48bef5cedfd4.png]: /images/20220829/7ea30d85ef2b41e689740514974353eb.png