php验证码功能实现

1.页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <link rel="stylesheet" href="css/comm.css"> -->
    <title>海外精选</title>
    <style>
		ul{ list-style: none; }
		a{ text-decoration: none; }
		.logo-container{
			width: 1200px;
			min-height: 600px;
			margin: 0 auto;
			border: 1px solid red;
		}
		.logo-container h4{
			width: 100%;
			color:#fff;
			text-align: center;
			font-size: 22px;
		}
		.logo{
			min-height: 400px;
			margin: 12px 26px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.user-form{

		}
		.user-form>li{
			margin: 12px 0 25px 0px;

		}
		.header{
			width: 100%;
			background: #115783;
			color:#fff;
			padding: 12px;
			position: relative;
		}
		.header>a{
			color: #fff;
			position: absolute;
			top: 0;
			left: 0;
		}
		input{
			outline: none;
			padding: 8px 5px;
			width: 200px;
			border-radius: 5px;
		}
		li.register_vcode{
			display: flex;
			justify-content: center;
		}
		li.register_vcode>img{
			cursor: pointer;
		}
    </style>
</head>
<body>
   <div class="logo-container">
   		<div class="header">
   			<a href="../index.php">首页</a>
   			<h4>登陆账户</h4>
   		</div>
		<div class="logo">
			<form action="user.php" method="POST">
				<ul class="user-form">
					<li>
						<span>用户</span>
						<input type="text" name="uname" placeholder="用户名" value="name2">
					</li>
					<li>
						<span>密码</span>
						<input type="password" name="upwd" placeholder="密码">
					</li>
					<li>
						<span>验证</span>
						<input type="text" name="vcode" placeholder="输入下方验证码">
					</li>
					<li class="register_vcode">
						<img id="vcodeImg" class="register_vcode" src="../data/vcode.php" alt="验证码出错了"/>
					</li>
					<li>
						<input type="submit" value="提交">
					</li>
				</ul>
			</form>
		</div>
   </div>
   <script>
   window.onload = function(){
   		var vcodeImg = document.getElementById("vcodeImg");
   		console.log(vcodeImg);
   		vcodeImg.onclick=function(){
   			console.log(this);
   			// this.src = '../data/vcode.php?'+Math.random();
   			this.src = '../data/vcode.php';
   		}
   }
   </script>
</body>
</html>

2.php服务器端

<?php
/*使用PHP向客户端输出一幅随机的验证码图片*/
header('Content-Type:image/png');

// $w = 120;
// $h = 30;

$w = 150;
$h = 60;  

//在服务器端内存中创建一幅图片
$img = imagecreatetruecolor($w,$h);

//绘制随机颜色的背景——矩形
$c = imagecolorallocate($img,rand(180,230),rand(180,230),rand(180,230));
// $c = imagecolorallocate($img,255,255,255);  //白色背景

imagefilledrectangle($img,0,0,$w,$h,$c);
//绘制四个随机的文字
$pool = 'ABCDEFGHIJKLMNPQRSTWXY3457689';
$str = ''; //生成的随机验证码内容
for($i=0;$i<4;$i++)
{
  $char = $pool[rand(0,strlen($pool)-1)]; //随机取出一个
  $str .=$char;
  // $fs = rand(15,28);  //随机文字字体大小 
  $fs = rand(25,38);  //随机文字字体大小
  //随机颜色的给字体
  $c = imagecolorallocate($img,rand(80,150),rand(80,150),rand(80,150));
  $angle = rand(-20,30); //随机旋转角度

  // 可更换不同的字体文件，来改变输出字体样式
  // $font = "../fonts/msyh.ttf";
  // $font = "../fonts/nyctophobia.ttf";
  $font = "../fonts/Adieresis.ttf";
  //绘制当前的随机字符
  // imagettftext($img,$fs,$angle,$i*30,30,$c,$font,$char);  //$ff字体文件。
  imagettftext($img,$fs,$angle,$i*38,50,$c,$font,$char);  //$i*30 字符间距，下一个表示垂直间距浮动
  // imagettftext($img,$fs,$angle,$i*30,30,$c,$char);
}

/********/
//在服务器端Session中存储生成的验证码内容

session_start();
$_SESSION['VcodeInServer'] = $str;
/*********/

//绘制五条随机干扰线
for($i=0; $i<5; $i++){
    $c = imagecolorallocate($img, rand(180,255),rand(180,255),rand(180,255));
    imageline($img, rand(0,$w), rand(0, $h), rand(0,$w),rand(0,$h),$c);
}

//绘制30个随机干扰点——半径为1的圆形
for($i=0; $i<30; $i++){
    $c = imagecolorallocate($img, rand(0,255),rand(0,255),rand(0,255));
    imagearc($img, rand(0,$w), rand(0,$h), 1,1,0,360,$c);
}


//把服务器内存中创建的图片输出给客户端
imagepng($img);
//从服务器内存中删除创建的随机图片
imagedestroy($img);

php验证码功能实现

猜你喜欢