Send string to php gd via ajax request

Question

I am trying to create a captcha code image using 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); 

The GET value is sent using ajax as follows:

 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"> 

Although it does not give errors, the image is not generated. Yes, the request will reach the php script, I already checked, but something is blocking the creation of the image ...

UPDATE Actually an image is created and an ajax request is also sent. But in the test_image.php script, $ _GET ['captcha'] (request) is not recognized, so it just displays an empty line in this image, although there is an image, but without a line.

Answer 1

You want to load the contents of your image using AJAX, but you do not want to put the URL in the img tag for security reasons. Thus, in this case you should get the data encoded in base64 and use it inside your img src.

Use the following code for your php file:

 <?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 code will look like this:

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

The HTML element will be updated with an identifier. Also add any gif / animation upload before uploading the image.

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

Now calling Captcha() funciton in javascript will always load a new captcha image. Put the appropriate image loading.gif and error.jpg

Answer 2

Can you try this in your js code? Instead of loading the image through ajax, we can try just adding the code to the src value of the image:

 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 3

try replacing the get parameter with test parameter: $ imgstring = 'this is some text';

Does this image display text.

by the way. this is not a good way for captcha, all bots can easily read ajax request. It would be better to generate a captcha using the file test_image.php and, for example, store a random string in the session.

UPDATE

So, if you really want to use ajax, you cannot do it the way you do. You need to use base64 encode to show picure via 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"]

Kant post html brackets .. use <>

Answer 4

You write:

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

but not passing any parameters. Of course, your PHP script does not see $_GET['captcha'] . Your AJAX is invoked, but does not affect img due to the fact that it is not associated with it.

Try:

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

This will send your string to the GET request.

If you want to call it with the click of a button (for example, "Refresh captcha"), call this code in your onclick event.

Answer 5

Check your server log. Perhaps imagettftext cannot open the specified font file.

Try copying the font file to the same directory as the php script.

Then:

 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;