gd 库预览图像

Question

我用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}û«½ª÷nv÷°»¹Íp8ä¬™k4K'2¶%ì ÁQðA²8È‚ ‰Ø'mÉ–ÈÈ##F³¯îäpí}«®®½ê²nçê_þ@xÍæ| ›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Ü¼ ÇqÇqn¿QÒpC*Žã8Žã¼ÜŠã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“çÖ‚`l¼Ô"È¤¹î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')，然后将此文件添加为上述表单的操作。

Answer 1

您可以内联图片

ob_start();

imagepng($image);
$img_data=ob_get_clean();
imagedestroy($image);

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

gd 库预览图像

gd library preview image

php

gd

image-processing