php5中新增了对GD库的支持,所以php也可以像canvas一样处理图像的。
但是我们一般使用它来处理验证码这样的东西,如果你想要画图还是建议你通过canvas,譬如echart这样的前端来实现,
因为GD相比canvas来说,性能上还是有差距的。
所以我们现在使用GD主要是为了制作这个,验证码:
绘制二维码要想实现二维码,咱们直接上代码吧:
<?php
session_start();
header("content-type:image/png");
$image_width = 76;
$image_height = 40;
$length = 4;//验证码位数
//验证码字符
$str = "23456789abcdefghijklmnopqrstuvwxyz";
//$str = "23456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYSZ";
$code = "";
for($i=0;$i<$length;$i++){
$code.=$str[mt_rand(0,strlen($str)-1)]; //随机4个字符出来
}
$_SESSION["verify"] = $code; //把随机出来的验证码存到session中
//GD2 语法
$image = imagecreate($image_width,$image_height); //创建画布
imagecolorallocate($image,255,255,255); //设置画布颜色
for($i=0;$i<strlen($_SESSION["verify"]);$i++){ //循环读取session中的验证码
$font = mt_rand(3,5); //设置随机的字体
$x = mt_rand(1,8)+$image_width*$i/4; //设置随机字符所在的x坐标
$y = mt_rand(8,$image_height/4); //设置随机字符所在的y坐标
$color = imagecolorallocate($image,mt_rand(0,100),mt_rand(0,150),mt_rand(0,200));
imagestring($image,$font,$x,$y,$_SESSION["verify"][$i],$color);//水平输出字体
}
//绘制干扰点
$pixel = 30;
$black = imagecolorallocate($image,0,0,0);
for($i=0;$i<$pixel;$i++){
imagesetpixel($image,mt_rand(0,$image_width-1),mt_rand(0,$image_height-1),$black);
}
//生成png图像
imagepng($image);
imagedestroy($image);
?>
其实你可以发现GD绘图,主要是靠imagecreate,imagecolorallocate和imagepng这几个方法,看代码完全可以明白!
然后我们制作登陆页面,把验证码和其他元素配合起来!
登陆页面<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<style>
.login{
width: 460px;
border: 1px solid #ccc;
border-radius: 5px;
background: #fff;
margin: 0 auto;
padding: 10px 20px 20px 20px;
margin-top: 20px;
}
.login h3 {
margin-top: 10px;
}
.login input[type=submit] {
margin-top: 20px;
padding: 5px 30px;
}
.code {
display: flex;
}
</style>
</head>
<body class="bg-info">
<form action="login.php" method="post">
<div class="login">
<h3>登陆</h3>
<div>用户名:<input type="text" name="username" class="form-control"/></div>
<div>密 码:<input type="password" name="password" class="form-control"></div>
<div>请输入验证码:</div>
<div class="code">
<div><input type="text" class="form-control" name="verify"></div>
<!--每次点的时候换一个地址请求一遍src+?后面的参数可以防止缓存-->
<div><img src="verify.php" onclick="this.src=this.src+'?'+Math.random()"></div>
</div>
<input type="submit" class="btn btn-primary" value="登陆">
</div>
</form>
</body>
</html>
登陆的login.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆验证</title>
</head>
<body>
<?php
//先打开session取出验证码存的session
session_start();
//首先对方必须填写了用户名和密码
if(isset($_POST["username"]) && isset($_POST["password"])){
//然后再获取验证码
$check = $_POST["verify"];
if($check == ""){
echo "<script>alert('验证码不能为空!');window.location.herf='login.html'</script>";
}
//如果填写对了 允许登陆
if($check == $_SESSION["verify"]){
echo "<script>alert('登陆成功!')</script>";
}else{
//如果不对
//echo $check;
//echo $_SESSION["verify"];
echo "<script>alert('验证码填写错误!');window.location.herf='login.html'</script>";
}
}
?>
</body>
</html>
怎么样,使用php做验证就是这么的轻松写意!
网友评论