更改文本图像的字体大小，动态地从文本转换为图像功能 [英] Change font size of text image converted from text to image function dynamically
本文介绍了更改文本图像的字体大小，动态地从文本转换为图像功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
工作模具艺术。我已经将文本转换为图像这是有效的我有3个文本框每个文本框在浏览器上生成单独的图像行。问题是我有另外三个文本框来更改字体大小每个转换的文本。我不知道如何将3种不同的字体大小变量转换为文本以更改字体大小，因为。
演示链接： -
$ 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 / javascriptsrc =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 =boxstyle =margin-left：360px;>
< span class =linestyle =margin-left：578px;> FONT SIZE LINE1 - < / span>
< input type =textname =stencil-text-sizevalue =100style =margin-left：15px;>
< span class =linestyle =margin-left：578px;> LINE 1-< / span>
< input type =textname =stencil-textstyle =margin-left：15px;>
< br>
< span class =linestyle =margin-left：578px;> FONT SIZE LINE2 - < / span>
< input type =textname =stencil-text-sizevalue =50style =margin-left：15px;>
< span class =linestyle =margin-left：578px;> LINE 2< / span>
< input type =textname =stencil-textstyle =margin-left：15px;>
< br>
< span class =linestyle =margin-left：578px;> FONT SIZE LINE3 - < / span>
< input type =textname =stencil-text-sizevalue =20style =margin-left：15px;>
< span class =linestyle =margin-left：578px;> LINE 3-< / span>
< input type =textname =stencil-textstyle =margin-left：15px;>
< / div>
< div id =stencil-mainstyle =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 ################### #####
###将HTML背景颜色转换为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]）;}
###将HTML文本颜色转换为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]）;}
###创建图片
$ im = imagecreate（$ imagewidth，$ imageheight）;
###声明图像的背景颜色
$ bgcolor = imagecolorallocate（$ im，$ bgred，$ bggreen，$ bgblue）;
###声明图像的文字颜色
$ fontcolor = imagecolorallocate（$ im，$ textred，$ textgreen，$ textblue）;
###获取文本字符串的确切尺寸
###使用颜色，字体，文本和文本位置声明已完成的图像
$计数=计数（$ myArray的）;
$ box = imageTTFBbox（50，$ fontangle，$ font，'test'）;
###从维度获取文本宽度
$ textwidth = abs（$ box [4] - $ box [0]）;
###从维度获取文本高度
$ textheight = abs（$ box [5] - $ box [1]）;
###使用图像的长度和文本的长度水平获取居中文本的x坐标
$ xcord =（$ imagewidth / 2） - （$ textwidth / 2） - 2;
###使用图像的高度和文本的高度垂直获取居中文本的y坐标
$ 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）;
###关闭图片
imagedestroy（$ im）;
？>
运行代码后，你会得到类似于快照的快照样本
Working stencil art.Here i have converted text to image this is working good i have 3 text box every text box generating separate line of image on browser.The problem is that i have three another text box for to change the font size of that each converted text.I am not getting any idea how to 3 different font size variable to converted text to change font size because.
Demo Link:- Click Here
Bellow is snap shot what i exactly want.Here you can see that every line of text font size you can change through font size text (Line Height).
My index.php sample code
<?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>
My some.php sample code to convert text to image
<?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);
?>
解决方案
After some struggle i have made this answer get the text and font size variable and explode it as an array like bellow.
Demo Link:- Click Here
$myArray = explode(',', $_GET['img']);
$fontarray = explode(',' , $_GET['fontsize']);
Use the for loop to looping array
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] );
}
}
}
And pass that explode array in image text function like bellow.
imagettftext ( $im, $fontarray[$j], $fontangle, $xcord, $ycord, $fontcolor, $font, $myArray[$i] );
Full solution to convert text image and change the font of text line by line
1) Create index.php with bellow code
<?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) Create some.php with bellow code
<?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);
?>
You will get like bellow snap shot sample out put after run the code
这篇关于更改文本图像的字体大小，动态地从文本转换为图像功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
