使用 php 创建图像并作为 ajax 的响应发送答案

【问题标题】：Create image using php and send as response of ajax使用 php 创建图像并作为 ajax 的响应发送
【发布时间】：2013-07-24 23:05:09
【问题描述】：

我正在使用以下代码使用 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

我在 ajax 调用中创建它。

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

        }
    });

但是当我检查控制台时没有响应。如何获取此图像并显示它。非常感谢任何帮助。

【问题讨论】：

尝试在 php 代码中回显一些文本...然后回复
你不应该需要ajax来创建验证码，只传递php脚本url作为图像src就足够了。

标签： php jquery ajax image-processing

【解决方案1】：

如果您需要创建一些验证码，请使用以下代码，

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

传递hash值是为了避免缓存图片，随机值会产生不同的url，所以会产生新的图片。

【讨论】：

【解决方案2】：

使用数据 URI，参见：

php: recreate and display an image from binary data

您将 AJAX 响应添加到 img src 属性，不是现成的图像，而是 de base64 数据。

【讨论】：