GD 库预览图像

我使用 gd 库在图像上写入文本，并将一个普通和一个小保存到一个文件夹中。现在我想在将生成的文件保存到文件之前为用户提供生成的预览。

这是我为测试它所做的代码：

<script src="https://code.jquery.com/jquery-2.1.4.min.js">   </script>
<form action="" method="post">
<p>Slide Text:
 <textarea name="slide_text" rows="10" cols="50"></textarea>
</p>
 <p>
  Font Size:
  <select name="font_size" class="font_size"></select>
 </p>    
 <p>
  <input type="submit" value = "Write"/>
 </p>

 <script>
  $(function(){
  var $select = $(".font_size");
  for (i=1;i<=50;i++){
    $select.append($('<option></option>').val(i).html(i + ' ' + 'px'))
   }
  });
</script>

<?php 
if(isset($_POST['slide_text'])) {
//treat the values of the form
$text = $_POST['slide_text'];
$image = imagecreatefrompng('template/template.png');
imagealphablending($image, true);
$color = imagecolorallocate($image, 49,117, 175);
$font = 'font/arialbd.ttf';
$font_size = $_POST['font_size'];
$start_x = 50;
$start_y = 175;
$max_width = 578;
$newname = time();
$random = rand(100,999);
$name = $newname.$random;
imagettftext($image, $font_size, 0, $start_x, $start_y, $color, $font, $text); 

imagepng($image);

}
?>

当我提交表单时，我得到的是以下输出而不是图像：

‰PNG IHDRЕXHQ‰ IDATxœìÝyŒeW~ößïlw}û«1/2ª÷nv÷°»¹Íp8䬙k4K'2¶%ì ÁQÀðA²8È' ‰Ø'mÉ–œÈ##F³ ̄îäpí}«®®1/2êíïnçœ_þxÕÍæÚ›êfñ|@²›UïÝwî[îûÞsÎý|éb™&@Dýá8Žã8Žs ˆˆÀìN·ÊqÇqœíOdšÀØÑÿÒ5ÿuÇqǹe[qb"4''‡ã8Žã8ï;áæk8Žã8Žóþ% ×Ãá8Žã8ÎûN Œº8Ü1/4 ÇqÇqn¿QÒpC*Žã8Žã1/4ÜŠã8Žã8M''àpÇqç}'îtÇqçÆZ2ÖZKŒ！0DηNà‰Hk，1D( ̃«Ý}•Žã8ŽssC"，¬í%...5VJúRp@ya†i'çšV =_‰k3‡±VkB06J+.p8Žã8ÎM#€aZ¬v‡º0Èy%P''6ý¬('EŽ [-ù ̄ˆŒ¡Ašw©！，‡*•üNïÇ_8Çqç æX¢aVt"çÖ''l1/4Ô"Ȥ¹îg...é™f%ò•ˆμÑͺI(ûRI~§wô6sÃqÇqn"6¶ŸæƒD‡J"Qñ%'μÖjIa ˆ@p²PX(ÀZk9ò/G¡ ̄"ÑX'ý'ÕKÖÛÃ8T...¶lnÌ ÓY®=%·ÓpÃqÇqnœμ"š！4K~5"ÆP？É5An ̈°$*ÎcIr！Ë ̃Ö9¢%Úè§"X

有没有办法在不使用的情况下将其转换为图像 header('Content-Type: image/png'); ？

我可以完成这项工作的唯一方法是将所有生成图像的代码放入一个文件中并添加header('Content-Type: image/png')，然后将此文件添加为上述表单的操作。

ob_start();
imagepng($image);
$img_data=ob_get_clean();
imagedestroy($image);
echo '<img src="data:image/png;base64,'.base64_encode($img_data).' />';