php入门教程—打通前后端

php入门教程(九)绘制图像二维码

2019-10-18  本文已影响0人  党云龙

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做验证就是这么的轻松写意!

上一篇下一篇

猜你喜欢

热点阅读