预览




目录结构

image.php

<?php
    session_start();
    $width = 150;
    $height = 45;
    $font_size = 20;
    $font = "./verdana.ttf";
    $font = realpath($font);
    $chars_length = 6;

    $captcha_characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';

    $image = imagecreatetruecolor($width, $height);
    $bg_color = imagecolorallocate($image, rand(0,255), rand(0,255), rand(0,255));
    imagefilledrectangle($image, 0, 0, $width, $height, $bg_color);

    //background random-string-random-pos
    $hori_line = round($height/8);
    $vert_line = round($width/8);
    $random_string = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for($i=0; $i < $vert_line; $i++) {
        for ($j=0; $j < $hori_line; $j++) { 
            $random_letter = $random_string[rand(0, strlen($random_string)-1)];
            $color = imagecolorallocate($image, rand(0,255), rand(0,255), rand(0,255));
            imagestring($image, rand(1,2), rand(0,$width), rand(0,$height), $random_letter, $color);
        }
    }

    $xw = ($width/$chars_length);
    $x = 0;
    $font_gap = $xw/2-$font_size/2;
    $digit = '';
    for($i = 0; $i < $chars_length; $i++) {
        $letter = $captcha_characters[rand(0, strlen($captcha_characters)-1)];
        $digit .= $letter;
        $font_color = imagecolorallocate($image, rand(0,255), rand(0,255), rand(0,255));
        if ($i == 0) {
            $x = 0;
        }else {
            $x = $xw*$i;
        }
        imagettftext($image, $font_size, rand(-20,20), $x+$font_gap, rand(22, $height-5), $font_color, $font, $letter);
    }

    // record token in session variable
    $_SESSION['captcha_token'] = strtolower($digit);

    // display image
    header('Content-Type: image/png');
    imagepng($image);
    imagedestroy($image);
?>

index.html

<!DOCTYPE html>
<html>
<head>
    <title>PHP CAPTCHA Test Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>

    <div class="p-5">

        <div class="card">
            <div class="card-header">Message</div>
            <div class="card-body">

                <form id="contact-form" method="post" action="contact.php">
                    <div class="form-group row align-items-center">
                        <label for="message" class="col-sm-2 col-form-label">Message *</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="2" name="message" id="message"></textarea>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">Captcha *</label>
                        <div class="col-sm-10">
                            <div class="form-row align-items-center">
                                <div class="col mb-3">
                                    <input type="text" class="form-control" name="token" id="token" placeholder="Captcha" style="min-width: 150px;">
                                </div>

                                <div class="col mb-3">
                                    <img src="./captcha/image.php?12325" alt="CAPTCHA" id="image-captcha">
                                    <a href="#" id="refresh-captcha" class="align-middle" title="refresh"><i class="material-icons align-middle">refresh</i></a>
                                </div>

                            </div>

                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary" name="submit" id="submit">submit</button>
                </form>

            </div>
        </div>

    </div>

    <script>
        var refreshButton = document.getElementById("refresh-captcha");
        var captchaImage = document.getElementById("image-captcha");

        refreshButton.onclick = function(event) {
            event.preventDefault();
            captchaImage.src = './captcha/image.php?' + Date.now();
        };
    </script>

</body>
</html>

contact.php

<?php 

    session_start();

    if ( isset($_POST['message'], $_POST['token']) ) {

        
        $token = strtolower($_POST['token']);

        // validate captcha code        
        if (isset($_SESSION['captcha_token']) && $_SESSION['captcha_token'] == $token) {

            //success your code here

            $to = "somebody@example.com";
            $subject = "subject";
            $message = $_POST['message'];
            $headers = "From: webmaster@example.com" . "\r\n" .  "CC: somebodyelse@example.com";
            
            //mail($to, $subject, $message, $headers);

            echo "success";

        } else {
            echo "error CAPTCHA code";
        }
        
    }
?>