PHP GD get generated image to ajax

Question

Im trying to get the generated image from PHP via ajax.

Q.1 When ajax renders PHP it shows some symbols not the picture which it shows when PHP is run alone. How to i get the image PHP outputs and not those symbols?

Q2. How do i change the font size of the text rendered into the image?

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

Answer #1:

1. Add tag with <img id="capcha" src="../php/captcha.php" height="30" width="300"/> your .CaptchaImg container.

2. Use reload handler for capcha load like this:

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

Useful link: Refresh image with a new one at the same url.

---

Answer #2:

You may use another parameters to change font size. For example add GET-parameter to image load script. Then capture it on server and react while you rendering capcha image.

Client-side:

$.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'; };
};

---

Server-side:

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

// ... render image using obtained font size

---

P.S.: Also, you have forgot to use imagedestroy($im); in the end of PHP script.

Answer 2

this is your problem:

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

It should get html code but it gets png file which should be the src attribute of the img tag because you just echo it so in the first place you can use the image src as your captcha.php.

I believe you want to do ajax in order to refresh it without refreshing all page You can send a base64 string image

$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);

fix your ajax

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

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

Answer 3

Rather than send "Content-type: image/png" to ajax, try to send HTML. Change your captcha.php code :

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;

}

in 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
});