美文网首页php入门教程—打通前后端
php入门教程(九)绘制图像二维码

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

作者: 党云龙 | 来源:发表于2019-10-18 16:50 被阅读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做验证就是这么的轻松写意!

    相关文章

      网友评论

        本文标题:php入门教程(九)绘制图像二维码

        本文链接:https://www.haomeiwen.com/subject/xifwmctx.html