将第二个文本框输入文本值合并为现有创建图像中的新行
San*_*ate 5 javascript php image
工作模具文本项目我已创建代码将输入文本转换为图像它工作正常,但我有多个文本框(例如)文本框1,文本框2,文本框3.问题是,如果我键入文本框1其转换文本为图像和之后如果我在文本框2或文本框3中键入文本,它将在此处转换新图像我只想在新行中使用文本框1中的第一个图像转换文本创建该文本.
演示链接: - 点击这里
Bellow示例快照.您可以看到第一个文本框包围第1行和第二个文本框在一个图像上的第二行或新行上创建图像.
贝娄是我的代码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是用于将文本转换为图像some.php的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 加载函数的方法：
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否则图像将被裁剪。
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);
?>
| 归档时间： |
|
| 查看次数： |
1281 次 |
| 最近记录： |