动态更改从文本转换为图像功能的文本图像的字体大小答案

【问题标题】：Change font size of text image converted from text to image function dynamically动态更改从文本转换为图像功能的文本图像的字体大小
【发布时间】：2014-05-06 12:56:02
【问题描述】：

工作模板艺术。在这里，我已将文本转换为图像，效果很好，我有 3 个文本框，每个文本框在浏览器上生成单独的图像行。问题是我还有另外三个文本框用于更改字体大小每个转换后的文本。我不知道如何使用 3 个不同的字体大小变量来转换文本以更改字体大小，因为。

演示链接：- Click Here

下面是我想要的快照。在这里你可以看到每一行文本的字体大小你可以通过字体大小文本（行高）来改变。

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

【问题讨论】：

你有什么问题？
你已经在这里link问过几乎相同的问题，你应该能够弄清楚如何添加额外的文本框
@MantasKaranauskas 你是对的，但我不知道如何分别更改多行的字体大小。
@JayBlanchard 我只想分别更改每个文本行的字体大小
看看我发布的内容。也许它可以提供帮助。

标签： php jquery image

【解决方案1】：

我很快就向您展示了如何使用 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"
        });
    });
});

我向输入添加了类，以便可以重复使用它们，而不是按名称为每个单独的输入执行函数。也许您可以修改它以与您的代码一起使用。

【讨论】：

您所要做的就是替换选择器和点击功能。
我用自己的方式回答了结帐演示stencils.bluecoresyspvtltd.com/custom%20line%20font/…

【解决方案2】：

经过一番努力，我得到了这个答案，得到了文本和字体大小变量，并将其分解为如下所示的数组。

演示链接：- Click Here

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

?>

运行代码后你会得到如下快照示例

【讨论】：