更改文本图像的字体大小,动态地从文本转换为图像功能 [英] 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屋!