Wordpress 标题问题（'Content-type：image/png'）;

Question

i'am trying to put a CAPTCHA in a wordpress custom plugin.

I did follow that tutorial:

https://code.tutsplus.com/tutorials/build-your-own-captcha-and-contact-form-in-php-.net-5362

<?php
session_start();
 
$permitted_chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
  
function generate_string($input, $strength = 10) {
    $input_length = strlen($input);
    $random_string = '';
    for($i = 0; $i < $strength; $i++) {
        $random_character = $input[mt_rand(0, $input_length - 1)];
        $random_string .= $random_character;
    }
  
    return $random_string;
}
 
$image = imagecreatetruecolor(200, 50);
 
imageantialias($image, true);
 
$colors = [];
 
$red = rand(125, 175);
$green = rand(125, 175);
$blue = rand(125, 175);
 
for($i = 0; $i < 5; $i++) {
  $colors[] = imagecolorallocate($image, $red - 20*$i, $green - 20*$i, $blue - 20*$i);
}
 
imagefill($image, 0, 0, $colors[0]);
 
for($i = 0; $i < 10; $i++) {
  imagesetthickness($image, rand(2, 10));
  $line_color = $colors[rand(1, 4)];
  imagerectangle($image, rand(-10, 190), rand(-10, 10), rand(-10, 190), rand(40, 60), $line_color);
}
 
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
$textcolors = [$black, $white];
 
$fonts = [dirname(__FILE__).'/Acme.ttf'];
 
$string_length = 6;
$captcha_string = generate_string($permitted_chars, $string_length);
 
$_SESSION['captcha_text'] = $captcha_string;
 
for($i = 0; $i < $string_length; $i++) {
  $letter_space = 170/$string_length;
  $initial = 15;
   
  imagettftext($image, 24, rand(-15, 15), $initial + $i*$letter_space, rand(25, 45), $textcolors[rand(0, 1)], $fonts[array_rand($fonts)], $captcha_string[$i]);
}
 
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
?>

At first wordpress didn't find the font, but i manage to pass the error. Then i call by shortcode the html. And i all i got is the alt and broken img. If i put directly the script in the function chrome tell me that my image contain errors. I did try to add utf8 encode and to pass the image without the header, none of that work.

    public function CAPTCHA_shortcode_function() {
        ob_start();
        ?>
        <div class="elem-group">
            <label for="captcha">Please Enter the Captcha Text</label>
            <img src="CAPTCHA-generate-image.php" alt="CAPTCHA" class="captcha-image"><i class="fas fa-redo refresh-captcha"></i>
            <br>
            <input type="text" id="captcha" name="captcha_challenge" pattern="[A-Z]{6}">
        </div>
        <?php

        $CAPTCHA = ob_get_clean();

        return $CAPTCHA;

    }

If you have any idea, something must be wrong ^^ Thanks a lot !

Answer 1

We did find a solution:

    imagepng($captcha_image,"captcha_image.png");
    $imgData = file_get_contents('captcha_image.png');
    imagedestroy($captcha_image);

    // $imgData = ob_get_clean();

    return $imgData;

Then call it in the function like this

        ob_start();
        $imgData = $this->CAPTCHA_generate();

        ?>

        <div id="CAPTCHA_box">
            <label for="captcha">Entrez les </label><br>
            <?php echo '<img class="captcha_image" src="data:image/png;base64,'.base64_encode($imgData).'" />'; ?>
            <i class="fas fa-redo refresh_captcha"></i>
            <br>
            <input type="text" id="captcha" name="captcha_challenge" pattern="[A-Z]{6}">
        </div>

        <?php

        $CAPTCHA = ob_get_clean();

        return $CAPTCHA;