Question

我试图通过ajax从PHP获取生成的图像。

Q.1当ajax呈现PHP时，它会显示一些符号，而不是单独运行PHP时显示的图片。如何获取图像PHP输出而不是那些符号？

Q2。如何更改渲染到图像中的文本的字体大小？

PHP。

$im    = imagecreate(300, 20);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im,   0,   0,   0);
imagestring($im, 5, 15, 1, '564545446', $black);
header ('Content-type: image/png');
imagepng($im, null, 3);

的Ajax：

$.CaptchaLoad = function(){
$.ajax({
    type:"POST",
    complete: function(){
        },
    url:"../php/captcha.php"
    }).done(function(feedback){
    $('.CaptchaImg').html(feedback) 
});
}

Answer 1

回答＃1：

使用<img id="capcha" src="../php/captcha.php" height="30" width="300"/>容器.CaptchaImg添加标记。

对capcha加载使用重载处理程序，如下所示：

$.CaptchaLoad = function(){
    var src   = '../php/captcha.php',
        stamp = (new Date()).getTime(),
        url   = src + '?' + stamp;

    document.getElementById('capcha').src = url;
};

有用的链接： Refresh image with a new one at the same url。

回答＃2：

您可以使用其他参数来更改字体大小。例如，将GET - 参数添加到图像加载脚本。然后在服务器上捕获它并在渲染capcha图像时做出反应。

客户端：

$.CaptchaLoad = function(){
    var src   = '../php/captcha.php',
        stamp = (new Date()).getTime(),
        font  = 15, // or get it from somewhere else
        url   = src + '?stamp=' + stamp + '&font=' + font,
        img   = document.getElementById('capcha');

    img.src       = url;
    img.className = 'capcha-loading';
    img.onload    = function(){ this.className = ''; };
    img.onerror   = function(){ this.className = 'capcha-error'; };
};

服务器端：

$font = isset($_GET['font']) ? abs((int)$_GET['font']) : 15;
//                                      ^                ^
//                                asked font size      default

// ... render image using obtained font size

P.S。：此外，您忘记在PHP脚本的末尾使用imagedestroy($im);。

Answer 2

这是你的问题：

    $('.CaptchaImg').html(feedback);

它应该获取HTML代码，但它获取png文件，该文件应该是img标记的src属性因为你只是回应它所以首先你可以使用图像src作为你的captcha.php。

我相信你想做ajax以便在不刷新所有页面的情况下刷新它您可以发送base64字符串图像

$im    = imagecreate(300, 20);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im,   0,   0,   0);
imagestring($im, 5, 15, 1, '564545446', $black);
imagestring($im, 5, 15, 1, '564545446', $black);
ob_start();
imagepng($im);
$imagestring = ob_get_contents();
ob_end_clean();

echo'data：image / jpeg; base64，'。base64_encode（$ imagestring）;

imagedestroy($im);

修复你的ajax

    $.ajax({
        type:"POST",
        complete: function(base64image){
            },
        url:"../php/captcha.php"

    }).done(function(base64image){
                 $('.captch').attr('src',base64image);
});

Answer 3

不是将“Content-type：image / png”发送到ajax，而是尝试发送HTML。更改您的captcha.php代码：

echo sprintf("<img src=\"%s\">", generate_img()); //return html to ajax

function generate_img() {
        $im = imagecreate(300, 20);
        $white = imagecolorallocate($im, 255, 255, 255);
        $black = imagecolorallocate($im, 0, 0, 0);
        imagestring($im, $_POST["font_size"], 15, 1, $_POST["text"], $black);
        imagepng($im, null, 3);

        header('Content-type: image/png');
        echo $im;

}

在ajax中：

$.ajax({
    type:"POST",
    data{
      text : "My text",
      font_size : 5
    }
    complete: function(){
        },
    url:"../php/captcha.php"
    }).done(function(img){
    $('.CaptchaImg').html(img); //.CaptchaImg can be a DIV element
});

PHP GD将生成的图像发送到ajax

3 个答案: