gd library preview image

Question

I have used gd library to write text on image and save one normal and one small into a folder. Now I want to give the user a preview of the generated before saving it to file.

This is the code I did to test this:

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


}

?>

When I submit the form, I get this output instead of the image:

‰PNG IHDRЕXHQ‰ IDATxœìÝyŒeW~ößïlw}û«½ª÷nv÷°»¹Íp8䬙k4K'2¶%ì ÁQÀðA²8È‚ ‰Ø'mÉ–œÈ##F³¯îäpí}«®®½êíï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ܼ Ç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

Is there a way to to convert this into an image without using header('Content-Type: image/png'); ?

The only way that I can make this work is to put all the code that generates the image into a file and add header('Content-Type: image/png') , then add this file as the action of the form above.

Answer 1

You can inline the image

ob_start();

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

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