将第二个文本框输入文本值合并为现有创建图像中的新行 [英] Merge second text box input text value as new line in existing created image
问题描述
工作模具文本项目我已创建代码将输入文本转换为图像它工作正常，但我有多个文本框（例如）文本框1，文本框2，文本框3.问题是如果我键入文本框1其将文本转换为图像，之后如果我在文本框2或文本框3中键入文本，则在此处转换新图像我只想在新行中创建文本框中第一个图像转换文本的文本。
Working stencils text project i have created code to convert input text to image it's working good but i have multiple text box (e.g) Text box1, Text box2,Text box3.The problem is that if i type in text box 1 its convert text to image and after if i type text into text box2 or text box3 its convert the new image here i just want create that text in new line with the first image converted text from text box1.
演示链接： - 点击此处
贝娄示例快照。您可以看到第一个文本框包围第1行和第二个文本框在一个图像上的第二行或新行上创建图像。
Bellow example snap shot.here you can see that first text box crate line 1 and second text box create image on second or new line on one image.
Bellow是我的代码index.php
<?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>
2）Bellow是用于将文本转换为图像的PHP代码some.php
<?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加载函数的方法：
You need to get the values of your text fields and send them all to some.php the same time, now you are sending them individually. Also the some.php needs to get both of them and generate a single image with them. Here is how you can do it using jQuery load function:
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>
这里jQuery获取名为stencil-text的输入字段的所有值，你可以添加为您想要的许多输入字段，它将以相同的方式工作。您唯一需要做的就是更改 $ imageheight 否则图像将被裁剪。
Here jQuery gets all the values of input fields with name "stencil-text", you can add as many input fields you want and it will work the same way. The only thing you need to do is to change the $imageheight otherwise the image will get cropped.
some.php
<?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);
?>
这篇关于将第二个文本框输入文本值合并为现有创建图像中的新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
