Create image using php

Question

I am creating image using php GD library it is working fine but when i use some ajax in it then it occurs some problem like the ajax response is unreadable text. Basically i want to get the image using ajax. My code is given below:

html code:

<textarea name="txt" id="txt"></textarea>

Jquery Ajax code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {

    $("#txt").change(function() {
        var txt = $("#txt");
        //alert(txt.val());

         var myData = 'txt='+ txt.val(); //build a post data structure


            jQuery.ajax({
            type: "POST", // Post / Get method
            url: "create.php", //Where form data is sent on submission
            //contentType: "image/png",
            dataType:"text", // Data type, HTML, json etc.
            data:myData, //Form variables
            success:function(response){
                //alert(response);
                var result = response;

            /*$("#socialline").hide();
            $("#msgline").show();*/

             document.getElementById('img').innerHTML = response;

                //$('.loading').remove();
            },
            error:function (xhr, ajaxOptions, thrownError){
                //On error, we alert user
                alert(thrownError);
            }
            });
    });

    });
    </script>

Php file (create.php) code

<?php  
$txt = $_POST['txt'];
    $im = @imagecreate(400, 300) or die("Cannot Initialize new GD image stream");
    $background_color = imagecolorallocate($im, 0, 0, 0);
    $text_color = imagecolorallocate($im, 233, 14, 91);
    imagestring($im, 55, 55, 55,  $txt, $text_color);
    header("Content-Type: image/png");
    imagepng($im);
    imagedestroy($im);

    //echo '<img src="image.jpg" />';

    //echo $txt;
    //echo $abc;


?>

The output is something like that

�PNG  IHDR�,�yw�PLTE�[an��IDATh���1 �0��@�@(�C!ࢇi�^@p�Щ���W�x�B����3�H]D��"���?����_ӭ*��Y��?I��d�}g��T''2���U��;���� =%'�N��3}��L8���҇���{��E�-�X�\���7%8o��`IEND�B`�

Yes, that's because they're image files in their specific format and not readable text. What you want to do is to set the image's `src` property to the generated URL, the browser will take care of the rest — Pekka, Jun 04 '13 at 13:19
I didn't get your point please help to write specific code, i can understand it well. — user2451809, Jun 04 '13 at 13:22
you need to change the create.php code to work with get. then in your $("#txt").change just update the img's src with whatever values < img src="create.php?txt=whatever"/> — Sharky, Jun 04 '13 at 13:24

score 1 · Answer 1 · answered Jun 04 '13 at 13:46

1

<?php
header("Content-Type: image/png");
$im = @imagecreate(110, 20)
    or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 0, 0, 0);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5,  "A Simple Text String", $text_color);
imagepng($im);
imagedestroy($im);
?>

answered Jun 04 '13 at 13:46

Muhammad Saqlain Arif

544
1
5
16

Saqlain DON'T COPY PASTE please... I want a genuine solution. – user2451809 Jun 04 '13 at 13:51

score 0 · Answer 2 · answered Jun 04 '13 at 13:33

What you'd want to do (also see @Pekka's comment) is to pass the url (create.php) as the source of your image file.

Basically:

<img src="create.php?txt=some%20text" />

File create.php:

<?php  
$txt = $_GET['txt'];
$im = @imagecreate(400, 300) or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 0, 0, 0);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 55, 55, 55,  $txt, $text_color);
header("Content-Type: image/png");
imagepng($im);
imagedestroy($im);
?>

Please note I altered the POST to a GET (you can't post inside an img, you can use query parameters though). So think of the consequences (url encode the text in the parameter in example).

Create image using php

2 Answers2