如何在Wordpress插件中使用驗證碼

Question

我創建了一個WordPress插件。 此插件以wordpress主題顯示提交表單。 我在我的wp插件中使用以下php驗證碼代碼：

    function create_image() { 
    $md5_hash = md5(rand(0,999)); 
    $security_code = substr($md5_hash, 15, 5); 
    $_SESSION["security_code"] = $security_code;
    $width = 100; 
    $height = 35;  
    $image = ImageCreate($width, $height);  
    $white = ImageColorAllocate($image, 255, 255, 255); 
    $black = ImageColorAllocate($image, 2, 0, 0); 
    $blue = ImageColorAllocate($image, 87, 20, 186);
    $grey = ImageColorAllocate($image, 204, 204, 204); 
    ImageFill($image, 0, 0, $blue); 
    ImageString($image, 5, 30, 8, $security_code, $white); 
    ImageRectangle($image,0,0,$width-1,$height-1,$grey); 
    header("Content-Type: image/jpeg"); 
    Imagepng($image); 
    ImageDestroy($image); 
}

並在img標簽中使用驗證碼：

<img class="captcha" src="<?php create_image() ?>">

但是當我在主題中使用此插件時，不起作用！

Answer 1

您的圖片標簽在渲染時會說

      <img class="captcha" src="<<a whole bunch of binary stuff>>">

為什么？ 因為您的create_image()函數使用Imagepng()的單參數形式內聯發出圖像。

相反，您需要將圖像發送到.png文件，然后在<img ... />標記中提及該文件的名稱。

您可以將函數的最后幾行更改為這樣。

   ...
   ImageRectangle($image,0,0,$width-1,$height-1,$grey); 
   $file = "tmp-" . rand() . ".png";
   Imagepng($image, $file);
   return "/" . $file;
}

這將使您的函數創建一個具有隨機名稱的png文件，然后將其返回到要在<img .../>標記中使用的文件的路徑。

這將需要一些調試。 以我編寫它的方式，它假定您能夠寫入當前的工作目錄。 您可能需要寫一些Web服務器可以訪問的臨時目錄。

同樣，這些圖像文件也會堆積。 您需要做一些Cron工作或清理舊工作。

Answer 2

試試這個代碼..

<?php
    function generateRandomString($length = 10) {
        $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        $randomString = '';
        for ($i = 0; $i < $length; $i++) {
            $randomString .= $characters[rand(0, strlen($characters) - 1)];
        }
        return $randomString;
    }
    function generateCaptchaImage($text = 'good'){
        // Set the content-type
        header('Content-Type: image/png');
        $width  = 200;
        $height = 30;
        // Create the image
        $im = imagecreatetruecolor($width, $height);

        // Create some colors
        $white  = imagecolorallocate($im, 255, 255, 255);
        $grey   = imagecolorallocate($im, 128, 128, 128);
        $black  = imagecolorallocate($im, 0, 0, 0);
        imagefilledrectangle($im, 0, 0, 399, 29, $white);

        //ADD NOISE - DRAW background squares
        $square_count = 6;
        for($i = 0; $i < $square_count; $i++){
            $cx = rand(0,$width);
            $cy = (int)rand(0, $width/2);
            $h  = $cy + (int)rand(0, $height/5);
            $w  = $cx + (int)rand($width/3, $width);
            imagefilledrectangle($im, $cx, $cy, $w, $h, $white);
        }

        //ADD NOISE - DRAW ELLIPSES
        $ellipse_count = 5;
        for ($i = 0; $i < $ellipse_count; $i++) {
          $cx = (int)rand(-1*($width/2), $width + ($width/2));
          $cy = (int)rand(-1*($height/2), $height + ($height/2));
          $h  = (int)rand($height/2, 2*$height);
          $w  = (int)rand($width/2, 2*$width);
          imageellipse($im, $cx, $cy, $w, $h, $grey);
        }

        // Replace path by your own font path
        $font = 'ThisisKeSha.ttf';

        // Add some shadow to the text
        imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);

        // Add the text
        imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

        // Using imagepng() results in clearer text compared with imagejpeg()
        imagepng($im);
        imagedestroy($im);
    }

    $randomString = generateRandomString();
    generateCaptchaImage($randomString);
?>

仍然不明白，然后通過演示參考這個好的解決方案