jQuery POST to GD image creation page - php

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