Изменение размера шрифта текстового изображения, преобразованного из текста в функцию изображения динамически

Рабочий трафарет art.Here я преобразовал текст в изображение, это работает хорошо, у меня есть 3 текстовых поля, каждое текстовое поле создает отдельную строку изображения в браузере. Проблема в том, что у меня есть еще три текстовых поля для изменения размера шрифта каждого из них преобразованный текст. Я не понимаю, как 3 разных размера шрифта для конвертированного текста, чтобы изменить размер шрифта, потому что.

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

Bellow – это щелчок, который я точно хочу. Здесь вы можете видеть, что каждую строку размера шрифта текста можно изменить с помощью текста шрифта (Line Height).

пример

Код примера 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(){ /* $( "#target" ).change(function() { // alert( "Handler for .change() called." ); var fontname = this.value; //alert(fontname); var img_text = $('input[name="stencil-text"]').map(function(){ return $(this).val(); }).get(); var img = $("<img />").attr('src', 'some.php?img=' + img_text+'&fontname='+fontname).load(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { alert('broken image!'); } else { $("#stencil-main").html(img); } }); }); */ $('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).load(function() { 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 { $("#stencil-main").html(img); } }); }); }); </script> </head> <body> <div id ="all"> <div id="box" style="margin-left: 394px;"> <span class="line" style="margin-left: 578px;">FONT SIZE LINE1 -</span> <input type="text" name="stencil-text-size" value="20" 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 LINE 2 -</span> <input type="text" name="stencil-text-size2" 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 LINE 3 -</span> <input type="text" name="stencil-text-size3" 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;"></div> </div> <!-- <select id="target"> <option value="ByzantineEmpire" selected="selected">Byzan</option> <option value="arial">Arial</option> </select> --> </body> </html>

Мой пример кода some.php для преобразования текста в изображение

 <?php header("Content-type: image/png"); $cid = str_replace(',', "\n", $_GET['img']); //$cid = array('s1=> ','s2=> ' ,'s3=> ').str_replace(',', "\n", $_GET['img']); //$fsize="20"; $fontname=$_GET['fontname'] ; $fontsize=$_GET['fontsize'] ; ####################### BEGIN USER EDITS ####################### //$imagewidth = 500; //$imageheight = 250; $imagewidth = 800; $imageheight = 1000; //$fontsize = "20"; $fontsize = $fontsize; $fontangle = "0"; $font = "ByzantineEmpire.ttf"; //$font = $fontname.'.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); ?>

Related of "Изменение размера шрифта текстового изображения, преобразованного из текста в функцию изображения динамически"

Я сделал это очень быстро, чтобы показать вам, как изменить размер шрифта для каждого из полей, используя jQuery – http://jsfiddle.net/jayblanchard/FB5fL/

 $('#set').click(function(e) { e.preventDefault(); $('.stencil-text').each(function(index) { // loop through each text box var fontSize = $(this).prevAll('.stencil-text-size').val(); // get the font-size for the current text box var fontText = $(this).val(); // get the text console.log(fontSize +' '+ fontText); // just for testing var newSpan = '<span>' + fontText + '</span><br />'; // set up a new span with the text $('#stencil-main').append(newSpan); // append the new span $('#stencil-main span:last').css({ // modify the new span's CSS "font-size": fontSize + 'px', "color": "red" }); }); });

Я добавил классы к входам, чтобы их можно было повторно использовать вместо выполнения функции для каждого отдельного ввода по имени. Возможно, вы можете изменить это для использования с вашим кодом.

После некоторой борьбы я сделал этот ответ, получив переменную текста и размера шрифта и взорвю ее как массив, подобный приведенному ниже.

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

 $myArray = explode(',', $_GET['img']); $fontarray = explode(',' , $_GET['fontsize']);

Используйте цикл for для циклического массива

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

И передайте этот массив взрыва в текстовую функцию изображения, например, ниже.

 imagettftext ( $im, $fontarray[$j], $fontangle, $xcord, $ycord, $fontcolor, $font, $myArray[$i] );

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

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

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

введите описание изображения здесь