【例項】使用GD庫生成圖片驗證碼

L小臣發表於2020-11-15

一、載入 GD 庫

GD 庫是一個開放的、動態建立影像的、原始碼公開的函式庫，可以從官網下載。目前，GD 庫支援 GIF、PNG、JPEG、WBMP 和 XBM 等多種影像格式，用於對影像的處理。
GD 庫在 PHP5 是預設安裝的，但要啟用 GD 庫，必需設定 php.ini 檔案。即將該檔案中的“;extension=php_gd2.dll”選項前的分號“;”刪除。儲存修改後的檔案並重啟 Apache 伺服器即可。
在成功載入 GD2 函式庫後，可以通過 phpinfo() 函式來獲取 GD2 函式庫的安裝資訊，驗證 GD 庫是否安裝成功。在瀏覽器中輸入“域名/phpinfo.php”並按 Enter 鍵，在開啟的頁面中如果檢索到下圖中的 GD 庫的安裝資訊，說明 GD 庫安裝成功。
在這裡插入圖片描述

如果使用的是 PHP 整合開發環境，預設 GD2 函式庫已經被載入。

二、開發步驟

1、使用 imagecreatetruecolor()函式建立一個圖片（即畫布）。
2、填充圖片背景，使用 imagettftext()函式向圖片新增隨機驗證碼。
3、設定干擾，使用 imagesetpixel()函式給圖片新增干擾點。
4、設定干擾，使用 imageline()函式給圖片新增干擾線。
5、輸出圖片，然後釋放資源。
6、最後在展示頁面輸出圖片驗證碼。

三、程式碼

1、驗證碼生成檔案：code.php

<?php
//啟動session
session_start();
$code = "";         //驗證碼字串
//驗證碼字元取值範圍[a-z0-9]
$str = "qwertyuiopasdfghjklzxcvbnm1234567890";
$w = 160;           //圖片寬度
$h = 40;            //圖片高度
$num = 4;           //驗證碼字元數
$dotNum = 300;      //干擾點個數
$lineNum = rand(3, 5);  //干擾線條數
$font = "simsunb.ttf";  //設定字型檔案
$image = imagecreatetruecolor($w, $h);  //建立一張指定寬高的圖片
//設定背景圖片顏色為白色
$imageColor = imagecolorallocate($image, 255, 255, 255);   
//填充圖片背景
//隨機驗證碼，包含字母和數字
imagefill($image, 0, 0, $imageColor);  
for ($i = 0; $i < $num; $i++) {
    $fontColor = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));  // 生成隨機字型顏色
    //隨機取字符集中的值
    $content = substr($str, rand(0, strlen($str)), 1);      
    $code .= $content;
    $fontSize = rand(15, 25);   // 字型大小
    // 指定生成位置X軸偏移量
    $x = $i * $w / $num + rand(5, 10);          
    $y = rand(20, 30);  // 指定生成位置Y軸偏移量
    imagettftext($image, $fontSize, 0, $x, $y, $fontColor, $font, $content);
}
$_SESSION["code"] = $code;  //儲存驗證碼字串到session中
//生成干擾點
for ($i = 0; $i < $dotNum; $i++) {
    $dotColor = imagecolorallocate($image, rand(0, 255), rand(0, 255), rand(0, 255));
    imagesetpixel($image, rand(0, $w), rand(0, $h), $dotColor);
}

//生成干擾線
for ($i = 0; $i < $lineNum; $i++) {
    $lineColor = imagecolorallocate($image, rand(0, 100), rand(0, 100), rand(0, 100));

    imageline($image, rand(0, $w), rand(0, $h), rand(0, $w), rand(0, $h), $lineColor);
}
header("content-type:image/png");
imagepng($image);
imagedestroy($image);

2、圖片驗證碼應用檔案：front.php

<?php
    if(isset($_REQUEST["code"])){
        session_start();
        if(strtolower($_POST["code"])==$_SESSION["code"]){
            echo "<script>alert('正確！')</script>";
        }else{
            echo "<script>alert('錯誤！')</script>";
        }
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>驗證碼</title>
    <style>
        #code{
            border: 1px solid #ccc;
            vertical-align: bottom;
        }
        #refresh{
            text-decoration: none;
            font-size: .875em;
        }
    </style>
</head>
<body>
    <form action="" method="post">
        <p>
            驗證碼：
            <img src="code.php?r=<?php echo rand()?>" alt="" id="code">
            <a href="javascript:;" id="refresh">看不清？</a>
        </p>
        <p>
            輸入驗證碼：
            <input type="text" name="code">
        </p>
        <input type="submit" value="提交">
        <script>
        	// 重新整理驗證碼
            document.getElementById("code").onclick = document.getElementById("refresh").onclick = refresh;
            function refresh() {
                document.getElementById('code').src='code.php?r='+Math.random()
            }
        </script>
    </form>
</body>
</html>

四、效果展示

在這裡插入圖片描述

相關文章