gd library preview image

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ÕÍæÚ> êfñ | @ ²> UïÝwî [îûÞsÎý | éb ™ & @ Dýá8Žã8ŽsÀNN · ÊqqqœíOdšÀØÑÿÒ5ÿuÇqǹe [qb "4 \ ‡ ã8Žã8ï; áæk8Žã8Žóþ% × Ãá8Žã8ÎûN Œº8ܼ ÇqÇn¿QÒpC * Žã8Žã¼ÜŠã8Žã8M \ àpÇçç} 'î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% ò • μÑÍII (ûRI ~ §w6sÃqÇn "6¶ŸæƒD ‡ J" Qñ%, μÖjIa @ p²PX (ÀZk9ò/G¡¯ «ÑX'ý'ÕKÖÛÃ8T ... ¶lnÌ ÓY® =% · ÓpÃqÇqnœμ» š! 4K ~ 5” ° AEP? E5AN $ * Î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).' />';