Hi All, I wanna ask a question pleasenV. I am trying to create an image on
fly, please do help me , following is the code.
*File Name : Font.php
Code: *
<html>
<head>
<title>Image Creation</title>
<script language="javascript">
var xmlhttp;
function showPic()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var text = document.getElementById("textfield").value;
var url="image.php";
url=url+"?text="text;
alert(url);
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
if(xmlhttp.responseText == 1)
{
document.getElementById("pic").style.display="block";
}
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit=" return false;">
<table width="304" border="1">
<tr>
<td colspan="2"><div align="center">Text</div></td>
</tr>
<tr>
<td>Text</td>
<td><label>
<input type="text" name="textfield" id="textfield">
</label></td>
</tr>
<tr>
<td colspan="2"><label>
<div align="center">
<input type="submit" name="button" id="button" value="Update"
onClick="showPic()">
</div>
</label></td>
</tr>
<tr>
<td colspan="2"><div id="pic" style="display:none"><img src="pic.jpg"
/></div></td>
</tr>
</table>
</form>
</body>
</html>
*File Name : image.php
Code:*
[php]
$name = $_GET['text'];
$pic = imagecreatetruecolor(100, 100);
$text_color = imagecolorallocate($pic, 255, 255, 255);
imagestring($pic, 10, 15, 15, $name, $text_color);
$pi = Imagejpeg($pic,"pic.jpg");
echo $pi;
ImageDestroy($pic);
[/php]
*Problem: *
What this code is doing is that, it creates a new image with the text (that
user enters) on it, but loads the image that was created previously, I want
that it should display the text on the picture which users enter on the fly.
( e.g. If user enter TEXT as text it should display TEXT on the picture
displayed, soon after we get response from ajax).I hope you got the problem.
Thanks
