Javascript 合并第二个文本框输入文本值作为现有创建图像中的新行
工作模板文本项目我已经创建了将输入文本转换为图像的代码，工作正常，但我有多个文本框（例如，文本框1、文本框2、，文本框3。问题是，如果我在文本框1中键入文本，将其转换为图像，然后在文本框2或文本框3中键入文本，将其转换为新图像，我只想使用文本框1中的第一个图像转换文本在新行中创建该文本 演示链接：- 下面是抓拍示例。在这里，您可以看到第一个文本框包含第1行，第二个文本框在第二行创建图像，或者在一个图像上创建新行 下面是我的代码索引。phpJavascript 合并第二个文本框输入文本值作为现有创建图像中的新行,javascript,php,image,Javascript,Php,Image,工作模板文本项目我已经创建了将输入文本转换为图像的代码，工作正常，但我有多个文本框（例如，文本框1、文本框2、，文本框3。问题是，如果我在文本框1中键入文本，将其转换为图像，然后在文本框2或文本框3中键入文本，将其转换为新图像，我只想使用文本框1中的第一个图像转换文本在新行中创建该文本 演示链接：- 下面是抓拍示例。在这里，您可以看到第一个文本框包含第1行，第二个文本框在第二行创建图像，或者在一个图像上创建新行 下面是我的代码索引。php <?php ?> <html&g
<?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>
<?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);
?>
<?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>
<?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>
<?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);
?>
转换文本图像并逐行更改文本字体的完整解决方案
<?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>
<?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);
?>
<?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>
<?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);
?>
$（文档）.ready（函数（）{
$（'input[name=“stencil text”]”）。keyup（函数（）{
var img_text=$（'input[name=“stencil text”]”）。映射（函数（）{
返回$（this.val（）；
}).get（）；
var fontsize=$（'input[name=“stencil text size”]”）。映射（函数（）{
返回$（this.val（）；
}).get（）；
var img=$（“”）.attr（'src'，'some.php？img='+img_text+'&fontsize='+fontsize）.load（函数（）{
如果（！this.complete | | typeof this.naturalWidth==“undefined”| | this.naturalWidth==0）{
警报（“图像损坏！”）；
}否则{
//警报（字体大小）；
$（#stencil main”）.html（img）；
}
});
});
});
字体大小第1行-
第1行-
字体大小第2行-
第2行-
字体大小第3行-
第3行-
<?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>
<?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);
?>
<?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>
<?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);
?>
每一个输入都在请求一个新的图像。您需要将它们指向相同的位置。此外，您的PHP没有设置为处理多个输入。这只是一行文字。你需要做一点数学计算，对输入值进行一些评估。