PHP Lang
  1. PHP Lang
  3. Объединить второе текстовое поле с введенным текстовым значением в качестве новой строки в существующем созданном изображении
Intereting Posts
javascript: возможно ли настроить таргетинг на div другого файла? Получите отметку времени сегодня и вчера в php Шифрование данных POST – достаточно HTTPS? Неожиданный символ на входе: '\' (ASCII = 92) state = 1 в приложении Silex Отправка почты с помощью PHPMailer через прокси-сервер? PHP – HTML очиститель – привет w <o> rld / world tutorial striptags Вставить в таблицу только в том случае, если два отношения столбцов не дублируются Локализация CakePhp Родитель / ребенок в одном столе curl: Ran на разных серверах возвратил различные IP-адреса Отображение сообщения, когда набор результатов пуст Есть ли алгоритм для вывода всех возможных комбинаций двух наборов элементов? Альтернативы API face.com Как отправить электронное письмо с вложениями из формы PHP? Как отправить данные с помощью jQuery

Объединить второе текстовое поле с введенным текстовым значением в качестве новой строки в существующем созданном изображении

Рабочий текстовый проект с трафаретами. Я создал код для преобразования входного текста в изображение, он работает хорошо, но у меня есть несколько текстовых полей (например). Текстовое поле1, Текстовое поле2, Текстовое поле. Проблема в том, что если я ввожу текстовое поле 1, его текст конвертируется в изображение и после того, как если я наберу текст в текстовое поле2 или текстовое поле3, его конвертировать новое изображение здесь, я просто хочу создать этот текст в новой строке с первым преобразованным изображением текста из текстового поля1.

Демо-ссылка: – Нажмите здесь

Ниже приведен пример snap shot.here вы можете видеть, что первая строка ящика текстового поля 1 и второе текстовое поле создают изображение на второй или новой строке на одном изображении.

другая линия

Bellow – мой код index.php 

<?php ?> <html> <body> <img class="stencil-main" id="stencil-main" /> <span class="line" style="margin-left: 578px;">Enter Text-</span><input type="text" name="stencil-text" style="margin-left: 15px;" onkeyup="document.getElementById('stencil-main').src='some.php?img='+this.value" /> <br> <img class="stencil-mains" id="stencil-mains" /> <span class="line" style="margin-left: 578px;">Enter Text-</span><input type="text" name="stencil-text" style="margin-left: 15px;" onkeyup="document.getElementById('stencil-mains').src='some.php?img='+this.value" /> </body> </html>

2) Bellow – это php-код для преобразования текста в изображение some.php 

 <?php header("Content-type: image/png"); $cid=$_GET['img']; ####################### BEGIN USER EDITS ####################### $imagewidth = 500; $imageheight = 100; $fontsize = "20"; $fontangle = "0"; $font = "ByzantineEmpire.ttf"; $text = $cid ; $text2="sanjay"; $backgroundcolor = "FFFFFF"; $textcolor = "#000000"; ######################## END USER EDITS ######################## ### Convert HTML backgound color to RGB if( eregi( "([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $backgroundcolor, $bgrgb ) ) {$bgred = hexdec( $bgrgb[1] ); $bggreen = hexdec( $bgrgb[2] ); $bgblue = hexdec( $bgrgb[3] );} ### Convert HTML text color to RGB if( eregi( "([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $textcolor, $textrgb ) ) {$textred = hexdec( $textrgb[1] ); $textgreen = hexdec( $textrgb[2] ); $textblue = hexdec( $textrgb[3] );} ### Create image $im = imagecreate( $imagewidth, $imageheight ); ### Declare image's background color $bgcolor = imagecolorallocate($im, $bgred,$bggreen,$bgblue); ### Declare image's text color $fontcolor = imagecolorallocate($im, $textred,$textgreen,$textblue); ### Get exact dimensions of text string $box = @imageTTFBbox($fontsize,$fontangle,$font,$text); ### Get width of text from dimensions $textwidth = abs($box[4] - $box[0]); ### Get height of text from dimensions $textheight = abs($box[5] - $box[1]); ### Get x-coordinate of centered text horizontally using length of the image and length of the text $xcord = ($imagewidth/2)-($textwidth/2)-2; ### Get y-coordinate of centered text vertically using height of the image and height of the text $ycord = ($imageheight/2)+($textheight/2); ### Declare completed image with colors, font, text, and text location imagettftext ( $im, $fontsize, $fontangle, $xcord, $ycord, $fontcolor, $font, $text ); ### Display completed image as PNG $html=imagepng($im); ### Close the image imagedestroy($im); ?>

Вам нужно получить значения ваших текстовых полей и отправить их все на some.php в то же время, теперь вы отправляете их по отдельности. Также some.php должен получить оба из них и сгенерировать с ними одно изображение. Вот как вы можете это сделать, используя функцию загрузки jQuery:

index.php 

 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('input[name="stencil-text"]').keyup(function(){ var img_text = $('input[name="stencil-text"]').map(function(){ return $(this).val(); }).get(); var img = $("<img />").attr('src', 'some.php?img=' + img_text).load(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken image!'); } else { $("#stencil-main").html(img); } }); }); }); </script> </head> <body> <div id="stencil-main"></div> <span class="line" style="margin-left: 578px;">Enter Text-</span> <input type="text" name="stencil-text" style="margin-left: 15px;"> <br> <span class="line" style="margin-left: 578px;">Enter Text-</span> <input type="text" name="stencil-text" style="margin-left: 15px;"> </body> </html>

Здесь jQuery получает все значения полей ввода с именем «трафарет-текст», вы можете добавить столько полей ввода, сколько хотите, и оно будет работать одинаково. Единственное, что вам нужно сделать, это изменить изображение $imageheight иначе изображение будет обрезано.

some.php 

 <?php header("Content-type: image/png"); $cid = str_replace(',', "\n", $_GET['img']); ####################### BEGIN USER EDITS ####################### $imagewidth = 500; $imageheight = 120; $fontsize = "20"; $fontangle = "0"; $font = "ByzantineEmpire.ttf"; $text = $cid ; $text2="sanjay"; $backgroundcolor = "FFFFFF"; $textcolor = "#000000"; ######################## END USER EDITS ######################## ### Convert HTML backgound color to RGB if( @eregi( "([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $backgroundcolor, $bgrgb ) ) {$bgred = hexdec( $bgrgb[1] ); $bggreen = hexdec( $bgrgb[2] ); $bgblue = hexdec( $bgrgb[3] );} ### Convert HTML text color to RGB if( @eregi( "([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $textcolor, $textrgb ) ) {$textred = hexdec( $textrgb[1] ); $textgreen = hexdec( $textrgb[2] ); $textblue = hexdec( $textrgb[3] );} ### Create image $im = imagecreate( $imagewidth, $imageheight ); ### Declare image's background color $bgcolor = imagecolorallocate($im, $bgred,$bggreen,$bgblue); ### Declare image's text color $fontcolor = imagecolorallocate($im, $textred,$textgreen,$textblue); ### Get exact dimensions of text string $box = imageTTFBbox($fontsize,$fontangle,$font,$text); ### Get width of text from dimensions $textwidth = abs($box[4] - $box[0]); ### Get height of text from dimensions $textheight = abs($box[5] - $box[1]); ### Get x-coordinate of centered text horizontally using length of the image and length of the text $xcord = ($imagewidth/2)-($textwidth/2)-2; ### Get y-coordinate of centered text vertically using height of the image and height of the text $ycord = ($imageheight/2)+($textheight/2); ### Declare completed image with colors, font, text, and text location imagettftext ( $im, $fontsize, $fontangle, $xcord, $ycord, $fontcolor, $font, $text ); ### Display completed image as PNG $html=imagepng($im); ### Close the image imagedestroy($im); ?>

Полное решение для преобразования текстового изображения и изменения шрифта текста по строкам

Демо-ссылка: – Нажмите здесь

1) Создайте index.php со следующим кодом 

 <?php ?> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('input[name="stencil-text"]').keyup(function(){ var img_text = $('input[name="stencil-text"]').map(function(){ return $(this).val(); }).get(); var fontsize = $('input[name="stencil-text-size"]').map(function(){ return $(this).val(); }).get(); var img = $("<img />").attr('src', 'some.php?img=' + img_text+'&fontsize='+fontsize).load(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken image!'); } else { //alert(fontsize); $("#stencil-main").html(img); } }); }); $('input[name="stencil-text-size"]').keyup(function(){ var img_text = $('input[name="stencil-text"]').map(function(){ return $(this).val(); }).get(); var fontsize = $('input[name="stencil-text-size"]').map(function(){ return $(this).val(); }).get(); var img = $("<img />").attr('src', 'some.php?img=' + img_text+'&fontsize='+fontsize).load(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken image!'); } else { //alert(fontsize); $("#stencil-main").html(img); } }); }); }); </script> </head> <body> <div id ="all"> <div id="box" style="margin-left: 360px;"> <span class="line" style="margin-left: 578px;">FONT SIZE LINE1 -</span> <input type="text" name="stencil-text-size" value="100" style="margin-left: 15px;"> <span class="line" style="margin-left: 578px;">LINE 1-</span> <input type="text" name="stencil-text" style="margin-left: 15px;"> <br> <span class="line" style="margin-left: 578px;">FONT SIZE LINE2 -</span> <input type="text" name="stencil-text-size" value="50" style="margin-left: 15px;"> <span class="line" style="margin-left: 578px;">LINE 2-</span> <input type="text" name="stencil-text" style="margin-left: 15px;"> <br> <span class="line" style="margin-left: 578px;">FONT SIZE LINE3 -</span> <input type="text" name="stencil-text-size" value="20" style="margin-left: 15px;"> <span class="line" style="margin-left: 578px;">LINE 3-</span> <input type="text" name="stencil-text" style="margin-left: 15px;"> </div> <div id="stencil-main" style="margin-top: -652px;margin-left:-297px"></div> </div> </body> </html>

2) Создайте some.php со следующим кодом 

 <?php header("Content-type: image/png"); $myArray = explode(',', $_GET['img']); $fontarray = explode(',' , $_GET['fontsize']); ####################### BEGIN USER EDITS ####################### $imagewidth = 1000; $imageheight = 1000; $fontangle = "0"; $font = "ByzantineEmpire.ttf"; $backgroundcolor = "FFFFFF"; $textcolor = "#000000"; ######################## END USER EDITS ######################## ### Convert HTML backgound color to RGB if( @eregi( "([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $backgroundcolor, $bgrgb ) ) {$bgred = hexdec( $bgrgb[1] ); $bggreen = hexdec( $bgrgb[2] ); $bgblue = hexdec( $bgrgb[3] );} ### Convert HTML text color to RGB if( @eregi( "([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})", $textcolor, $textrgb ) ) {$textred = hexdec( $textrgb[1] ); $textgreen = hexdec( $textrgb[2] ); $textblue = hexdec( $textrgb[3] );} ### Create image $im = imagecreate( $imagewidth, $imageheight ); ### Declare image's background color $bgcolor = imagecolorallocate($im, $bgred,$bggreen,$bgblue); ### Declare image's text color $fontcolor = imagecolorallocate($im, $textred,$textgreen,$textblue); ### Get exact dimensions of text string ### Declare completed image with colors, font, text, and text location $count=count($myArray); $box = imageTTFBbox(50,$fontangle,$font,'test'); ### Get width of text from dimensions $textwidth = abs($box[4] - $box[0]); ### Get height of text from dimensions $textheight = abs($box[5] - $box[1]); ### Get x-coordinate of centered text horizontally using length of the image and length of the text $xcord = ($imagewidth/2)-($textwidth/2)-2; ### Get y-coordinate of centered text vertically using height of the image and height of the text $ycord = ($imageheight/2)+($textheight/2); for($i=0;$i<$count;$i++) { $newcount=count($fontarray); for($j=0;$j<$newcount;$j++) { if($j==$i) { $xcord=$xcord+2; $ycord=$ycord+100; imagettftext ( $im, $fontarray[$j], $fontangle, $xcord, $ycord, $fontcolor, $font, $myArray[$i] ); } } } $html=imagepng($im); ### Close the image imagedestroy($im); ?>

Вы получите то же самое, что и после того, как запустите код

вывод