Create image using php and send as response of ajax

Question

I am using the following code to generate a image using php.

        $image_width = 120;
        $image_height = 40;
        $characters_on_image = 6;
        $font = '/fonts/OpenSans.ttf';

        //The characters that can be used in the CAPTCHA code.
        //avoid confusing characters (l 1 and i for example)
        $possible_letters = '23456789bcdfghjkmnpqrstvwxyz';
        $random_dots = 10;
        $random_lines = 30;
        $captcha_text_color="0x142864";
        $captcha_noice_color = "0x142864";

        $code = '';

        $i = 0;
        while ($i < $characters_on_image) {
        $code .= substr($possible_letters, mt_rand(0, strlen($possible_letters)-1), 1);
        $i++;
        }

        $font_size = $image_height * 0.75;
        $image = @imagecreate($image_width, $image_height);

        /* setting the background, text and noise colours here */
        $background_color = imagecolorallocate($image, 255, 255, 255);

        $arr_text_color = $this->hexrgb($captcha_text_color);
        $text_color = imagecolorallocate($image, $arr_text_color['red'],
        $arr_text_color['green'], $arr_text_color['blue']);

        $arr_noice_color = $this->hexrgb($captcha_noice_color);
        $image_noise_color = imagecolorallocate($image, $arr_noice_color['red'],
        $arr_noice_color['green'], $arr_noice_color['blue']);

        /* generating the dots randomly in background */
        for( $i=0; $i<$random_dots; $i++ ) {
        imagefilledellipse($image, mt_rand(0,$image_width),
        mt_rand(0,$image_height), 2, 3, $image_noise_color);
        }

        /* generating lines randomly in background of image */
        for( $i=0; $i<$random_lines; $i++ ) {
        imageline($image, mt_rand(0,$image_width), mt_rand(0,$image_height),
        mt_rand(0,$image_width), mt_rand(0,$image_height), $image_noise_color);
        }

        /* create a text box and add 6 letters code in it */
        $textbox = imagettfbbox($font_size, 0, $font, $code);
        $x = ($image_width - $textbox[4])/2;
        $y = ($image_height - $textbox[5])/2;
        imagettftext($image, $font_size, 0, $x, $y, $text_color, $font , $code);

        /* Show captcha image in the page html page */
        header('Content-Type: image/jpeg');// defining the image type to be shown in browser widow
        imagejpeg($image);//showing the image
        imagedestroy($image);//destroying the image instance

And i am creating this in a ajax call.

$.ajax({
        url      : url,
        success  : function(data){
            $("#captcha_text").html(data);

        }
    });

But when i checked the console no response is getting.How to get this image and display it.Any help is much appreciated.

You should not need ajax to create a captcha, Only pass php script url as image src is enough. — kuldeep.kamboj, Jul 25 '13 at 07:44

Sherin Jose · Accepted Answer · 2013-07-25T07:44:24.177

If you need to create some captcha use the following code,

<img id='captcha' src='your_php_file_path' />
<a href="#" id="refresh">Refresh captcha</a>
<script>
$('#refresh').click(function(){
   $('#captcha').attr({
       src:'your_php_file_path?hash='+Math.random()*100000,
   });
});
</script>

The hash value is passed for avoiding the cached images, the random value will produce a different url , so new images will produced.

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

Use Data URI, see:

php: recreate and display an image from binary data

You add the AJAX response to the img src attribute, not a ready made image, but de base64 data.

edited May 23 '17 at 11:49

Community

1
1

answered Jul 25 '13 at 07:27

Garytje

874
5
11

Create image using php and send as response of ajax

2 Answers2