Question

I have a jquery form that posts to a callback page. The callback page uses PHP’s GD library to create an image.

The PHP code looks like this:

<?php
include 'inc/config.php';

$caseNum = $_POST['caseNum'];
$wish = $_POST['wish'];
$selectedWishes = join(", ", $wish);
$fname = $_POST['fname'];
$middlename = $_POST['middlei'];
$lname = $_POST['lname'];
$address1 = $_POST['adr1'];
$address2 = $_POST['adr2'];
$city = $_POST['city'];
$state = $_POST['state'];
$zip = $_POST['zip'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$recipt = $_POST['recipt'];

$terms_accepted = $_POST['tou'];

if ($terms_accepted == 'accept') {

    mysql_connect($db_host, $db_user, $db_pass);
    mysql_select_db($db_database);

    $select = mysql_query('SELECT * FROM children WHERE caseNumber="'.$caseNum.'" LIMIT 1 ');
    $row = mysql_fetch_array($select);

    header('Content-type: image/png');
    $im = imagecreatefrompng ("images/card_bg.png");
    $color = imagecolorallocate($im, 0, 0, 0);
    $font = 'inc/fonts/MyriadPro-Regular.otf';
    $size = 14;
    imagettftext($im, $size, 0, 130, 18, $color, $font, $caseNum);
    imagettftext($im, $size, 0, 52, 105, $color, $font, $row['age']);
    imagettftext($im, $size, 0, 108, 167, $color, $font, $row['name']);

    // Print wishes and word wrap
    $lines = explode('|', wordwrap($selectedWishes, 30, '|'));
    $y = 238;
    foreach ($lines as $line) {
    imagettftext($im, $size, 0, 18, $y, $color, $font, $line);
    $y += 23;
    }

    imagettftext($im, $size, 0, 339, 151, $color, $font, $fname.' '.$middlename.' '.$lname);
    imagettftext($im, $size, 0, 351, 175, $color, $font, $address1);
    imagettftext($im, $size, 0, 365, 196, $color, $font, $address2);
    imagettftext($im, $size, 0, 326, 218, $color, $font, $city);
    imagettftext($im, $size, 0, 474, 218, $color, $font, $zip);
    imagettftext($im, $size, 0, 340, 242, $color, $font, $phone);
    imagettftext($im, 9, 0, 333, 268, $color, $font, $email);

    if ($row['gender'] == 'male') {
        $check = imagecreatefrompng('images/checkmark.png');
        imagealphablending($check, true);
        imagesavealpha($check, false);
        imagecopymerge($im, $check, 74, 3, 0, 0, 10, 15, 80);
    }
    else if ($row['gender'] == 'female') {
        $check = imagecreatefrompng('images/checkmark.png');
        imagealphablending($check, true);
        imagesavealpha($check, false);
        imagecopymerge($im, $check, 74, 38, 0, 0, 10, 15, 80);
    }

    if ($recipt == 'yes') {
        $check = imagecreatefrompng('images/checkmark.png');
        imagealphablending($check, true);
        imagesavealpha($check, false);
        imagecopymerge($im, $check, 324, 383, 0, 0, 10, 15, 80);
    }
    else if ($recipt == 'no') {
        $check = imagecreatefrompng('images/checkmark.png');
        imagealphablending($check, true);
        imagesavealpha($check, false);
        imagecopymerge($im, $check, 367, 383, 0, 0, 10, 15, 80);
    }


    $imageName = rand();
    $ourFileName = $imageName.'.png'; 
    $ourFilePath = 'images/created_tags/';

    imagepng ( $im, $ourFilePath.$ourFileName );

    imagepng($im);
    imagepng($check);
    imagedestroy($check);
    imagedestroy($im); 

    readfile ( $ourFileName );

print $ourFilePath.$ourFileName;

    exit ();  

}


?>

and here is the jQuery:

$.post('selectChildCallback.php', $("#select_child_form").serialize(), function(data) {

                $("#post_image").append('<img src="'+ data.path +'" alt="card" />');

            }, 'json');

What I can’t figure out is how to make the callback page not display the image, but just the path. Right now it prints the image data instead of an image path.

Answer 1

readfile ( $ourFileName );

This line is the problem. According to the docs, it echos the contents of a file to the screen. So PHP is returning a image file (binary) with its file name concatenated to the end of the stream back to jQuery.

Remove this line, and this should work.

EDIT:

imagepng ( $im, $ourFilePath.$ourFileName );

imagepng($im);
imagepng($check);

Why do you call imagepng 3 times? If you don’t give it a second parameter, it echos the image to the screen. Also remove the last 2 imagepng lines. PHP is actually returning 3 images concatenated together as well as the file name.

It should look like this:

$imageName = rand();
$ourFileName = $imageName.'.png'; 
$ourFilePath = 'images/created_tags/';

imagepng($im, $ourFilePath.$ourFileName);

imagedestroy($check);
imagedestroy($im); 

echo $ourFilePath.$ourFileName;

exit();