通过ajax请求将字符串发送到php gd

Question

我尝试使用php gd创建验证码代码:

$im = imagecreatetruecolor(100, 25);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
$imgstring=$_GET['captcha'];
$font = 'RAVIE.TTF';
imagettftext($im, 15, 0, 10, 20, $black, $font, $imgstring);
header('Content-Type: image/png');
imagepng($im);
imagedestroy($im);

GET值与ajax一起发送,如下所示:

var randstring;
function Captcha() {
    randstring = Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, 5))).toString(36).slice(1);

            $.ajax({
                url: 'test_image.php',
                data: {'captcha' : randstring},
                method: 'GET',
                success: function (data){
                    console.log(data);
                },
                error: function (){
                    alert('Error');
                    return false;
                }   

            });
        }

HTML:

<img src="test_image.php">

虽然它没有错误,但不会生成图像.是的,请求到达php脚本,我已经检查过,但有些东西会阻止生成图片...

更新实际上生成了图像,并且还发送了ajax请求.但是在test_image.php脚本中,$ _GET ['captcha'](请求)无法被识别,因此它只会在该图像中输出一个空白字符串,尽管图像在那里但没有字符串.

Answer 1

您想要使用 AJAX 加载图像内容，但出于安全原因不想将 URL 放入 img 标记中。因此，在这种情况下，您应该获取图像的 Base64 编码数据并在您的 img src 中使用它。

在您的 php 文件中使用以下代码：

<?php

// Start output buffering
ob_start();
$im = imagecreatetruecolor(100, 25);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
$imgstring=$_GET['captcha'];
$font = 'RAVIE.TTF';
imagettftext($im, 15, 0, 10, 20, $black, $font, $imgstring);
imagepng($im);
imagedestroy($im);

// Get Image content a variable
$captchaImageData=ob_get_contents();
// Clean the output buffer
ob_end_clean();

//Base64 Encode
$encodedData = base64_encode($captchaImageData);

echo $encodedData;
?>

您的 Javascript 代码如下：

function Captcha() {
    var randstring = Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, 5))).toString(36).slice(1);

    $.ajax({
        url: 'test_image.php',
        data: {'captcha' : randstring},
        method: 'GET',
        beforeSend: function(data) {
            $('captchaImage').attr('src','laoding.gif');
        },
        success: function (data){
            // data is base64_encoded data of your image
            // load it in your img suorce
            $('captchaImage').attr('src','data:image/png;base64,'+data);
        },
        error: function (){
            alert('Error');
            $('captchaImage').attr('src','error.jpg');
        }   

    });
}

您的 HTML 元素将使用 ID 进行更新。还可以放置某种加载 gif/动画，直到加载图像。

<img src="loading.gif" id="captchaImage">

现在Captcha()在 javascript 中调用 funciton 将始终加载新的验证码图像。放置适当的loading.gif图像error.jpg