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.