我正在开发模板项目，我正在尝试将文本转换为图像。这里我在按键事件上有文本框，无论用户在文本框中输入什么，我都会获取文本，输入文本后我正在尝试转换该文本到同一页上的 div 名称 imageprint 中的图像中。
在下面的快照中，您可以看到在文本框中输入的文本不断在图像中转换。
贝壳是我的代码(index.php)
在代码中，我将 JavaScript 变量传递给 php 代码以将文本转换为图像，但它不起作用，我对 ajax 很陌生，如果有人有任何解决方案请告诉我。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<!--<script type="text/javascript" src="js/script.js"></script>-->
<title>
</title>
</head>
<body>
<!-- <form name="FORM" method="get" action=""> -->
Line 1:
<input type="text" name="text1" id="textinput">
<script>
var textinput = document.getElementById('textinput');
textinput.onkeyup = function() {
alert(textinput.value);
var test= textinput.value;
$.ajax({
type: "GET",
url: "index.php",
data: "cid=" +test ,
dataType: 'html',
success: function(data) {
// $("#textinput").html(data);
}
});
}
</script>
<div id="imageprint">
<?php
header("Content-type: image/png");
$cid=$_GET['cid'];
####################### BEGIN USER EDITS #######################
$imagewidth = 500;
$imageheight = 100;
$fontsize = "20";
$fontangle = "0";
$font = "ByzantineEmpire.ttf";
$text = $cid ;
$backgroundcolor = "003366";
$textcolor = "FFCC66";
######################## 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);
?>
</div>
</body>
</html>
如果我将逻辑分离在单独的文件 some.php 中，例如
$.ajax({
type: "GET",
url: "some.php",
data: "cid=" +test ,
dataType: 'html',
success: function(data) {
// $("#textinput").html(data);
}
});
像下面这样的一些.php
<?php
header("Content-type: image/png");
$cid=$_GET['cid'];
####################### BEGIN USER EDITS #######################
$imagewidth = 500;
$imageheight = 100;
$fontsize = "20";
$fontangle = "0";
$font = "ByzantineEmpire.ttf";
$text = $cid ;
$backgroundcolor = "003366";
$textcolor = "FFCC66";
######################## 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);
?>
查看单独逻辑文件的演示
从 ajax 获取响应，如下所示。
最佳答案
我有另一个想法，但不使用 AJAX。基本 JavaScript，onkeyup事件，您需要更改 <img />标签的src属性。我不明白在这里使用 AJAX 的意义。这里最好有基本属性值更改脚本而不是 AJAX。
最低级别的代码是:
<img class="stencil-main" id="stencil-main" />
<input type="text" name="stencil-text"
onkeyup="document.getElementById('stencil-main').src='some.php?img='+this.value" />
我仍然不确定AJAX在这里有什么用，但是上面的代码做了同样的工作。如果我错了请告诉我。
关于javascript - 在按键事件上立即使用 ajax 将文本转换为图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23243962/