1

我试图通过 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);

阿贾克斯：

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

3 回答 3

1

答案#1：

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

  2. 使用 reload 处理程序进行验证加载，如下所示：

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

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

有用的链接： 用相同 url 的新图像刷新图像。

答案#2：

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

客户端：

$.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

PS：另外，你忘了imagedestroy($im);在 PHP 脚本的末尾使用。

于 2013-12-29T07:04:46.917 回答
1

这是你的问题：

    $('.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);
});
于 2013-12-29T07:07:37.097 回答
0

与其将“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({
    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
});
于 2013-12-29T07:05:50.160 回答