jQuery POST 到 GD 图像创建页面

Question

我有一个发布到回调页面的 jquery 表单。回调页面使用 PHP 的 GD 库创建图像。

PHP 代码如下所示：

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

}


?>

这里是 jQuery：

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

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

            }, 'json');

我想不通的是如何使回调页面不显示图像，而只显示路径。现在它打印图像数据而不是图像路径。

Answer 1

readfile ( $ourFileName );

这一行是问题所在。根据docs，它将文件的内容回显到屏幕上。所以 PHP 正在返回一个图像文件（二进制），其文件名连接到流的末尾返回给 jQuery。

删除这一行，这应该可以工作。

编辑：

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

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

为什么要给imagepng打3次电话？如果你不给它第二个参数，它会将图像回显到屏幕上。同时删除最后 2 个 imagepng 行。 PHP 实际上是返回 3 个连接在一起的图像以及文件名。

应该是这样的：

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

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

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

echo $ourFilePath.$ourFileName;

exit();