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