通过 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 脚本，我已经检查过了，但是某些东西阻止了图像的生成...

UPDATE 实际上图像已经生成，并且 ajax 请求也被发送。但是在 test_image.php 脚本中，$_GET['captcha']（请求）无法识别，因此它只会在该图像中输出一个空白字符串，尽管图像在那里，但没有字符串。

Answer 1

你能在你的 js 代码中试试这个吗？我们可以尝试将代码附加到图像的 src 值，而不是通过 ajax 加载图像：

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

$("#image").attr('src',$("#image").attr('src') + "?captcha="+randstring );

HTML

<img id="image" src="test_image.php">

Answer 2

尝试用测试变量替换 get 参数： $imgstring='this is some text';

这是否显示带有文字的图像。

顺便说一句。这不是验证码的好方法，所有机器人都可以轻松读取 ajax 请求。例如，最好通过 test_image.php 文件生成验证码并将随机字符串存储在会话中。

更新

因此，如果您真的想使用 ajax，则不能按照您的方式使用。您需要使用base64 编码才能通过ajax 显示图片。 javascript:

$.ajax({
url: 'test_image.php',
data: {'captcha' : randstring},
method: 'GET',
success: function (data){
console.log(data);
$('#mycaptcha').attr('src','data:image/png;base64,'+data);
},error: function (){alert('Error');return false;}   
});

..

Captcha();

PHP:

imagettftext($im, 15, 0, 10, 20, $black, $font, $imgstring);
ob_start();
imagepng($im);
$imgdata=ob_get_contents();
ob_end_clean();
imagedestroy($im);
echo base64_encode($imgdata);

html: [img id="mycaptcha"]

不能post html括号..使用<>

Answer 3

你写：

<img src="test_image.php" id="img">

但不要在那里传递任何参数。当然，您的 PHP 脚本没有看到任何 $_GET['captcha']。您的 AJAX 正在被调用，但不会影响到 img，因为与它无关。

尝试：

var c = Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, 5))).toString(36).slice(1);
$("#img").attr("src", "test_image.php?captcha=" + c);

这将在 GET 查询中发送您的字符串。

如果您想在某些按钮点击时调用它（例如 "Refresh captcha"），请在其 onclick 事件中调用此代码。

Answer 4

您想使用 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/animation 直到加载图像。

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

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

Answer 5

检查您的服务器日志。可能imagettftext无法打开指定的字体文件

尝试将字体文件复制到与 php 脚本相同的目录。

然后：

putenv('GDFONTPATH=' . realpath('.'));
$im = imagecreatetruecolor(100, 25);
$white = imagecolorallocate($im, 255, 255, 0);
$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);
exit;

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

Send string to php gd through ajax request

ajax

image

php-gd