Image creation and html output ? ... help please

Accurax · May 30, 2007

hi guys, not been here for a while, I hope things havnt changed too much.

let me explain my problem.

I have a form, at the moment, justa text area which a user can type into.

This text is then taken and turned into .png and displayed to the user... eventually i will allow them to change fonts, colours etc etc.

Now, when i take the form POST information I have to send the correct headers "image/png" to create my image, but I want to bea ble to create my image without loosing the Html on my page aswell, so the user could keep changing the text without having to navigate backwards.

heres my code as it stands :

<?php


if(isset($_POST['phrase'])) {

// Set the content-type
header("Content-type: image/png");

$phrase = stripslashes($_POST['phrase']);

// Create the image
$im = imagecreatetruecolor(400, 30);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);

//create a border
imagefilledrectangle($im, 1, 1, 398, 28, $white);

// define the path to the selected font
$font = 'somefont.ttf';

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $phrase);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);

}
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

      <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
         <textarea name="phrase"></textarea><br />
         <input type="submit" /><br />
      </form>



</body>
</html>

When the above script runs, it works... but i cant figure out how to have html on the page at the same time..... can anyone give me some pointers here please ?

Thanks in advance

taith · May 30, 2007

you cant... you have to

<img src="img.php">

then in that page, build your image :-)

Accurax · May 30, 2007

Thanks taith

so, the action of the form should be the page i want to build the image on.... then i move the user back to the origional page and have an <img src=xxx> element on that page somewhere?

Does this mean the image has to be saved to the server?

chigley · May 30, 2007

Why not save your image in image.php, accepting GET variables for the data. Then send your form to a normal page, which calls the image like this:

<img src="image.php?value1=foo&value2=bar" alt="" \>

Where foo and bar are entered in the form.

taith · May 30, 2007

you img src="" to it just like a normal image, but to a php file, in which you use php to build your image...

Accurax · May 30, 2007

im really sorry guys... im a bit confused ....... i dont want the images to build up on my server, I only want them to exist at the time the user views them.

I cant see how i can <img src=""> without actually saving an image to the server.... can somone explain this to me please? .... sorry if im being dumb here

chigley · May 30, 2007

Have you read my post above? Doesn't save the image, only runs once.

Accurax · May 30, 2007

i read it chigley ... thanks... but im still a little lost .... any chance of some further explanation please?

chigley · May 30, 2007

At the moment, your image.php file receives the variable by POST. Change it to $_GET so the image can be accessed like this:

image.php?phrase=value

In image.php use this code:

<?php


if(isset($_GET['phrase'])) {

// Set the content-type
header("Content-type: image/png");

$phrase = stripslashes($_GET['phrase']);

// Create the image
$im = imagecreatetruecolor(400, 30);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);

//create a border
imagefilledrectangle($im, 1, 1, 398, 28, $white);

// define the path to the selected font
$font = 'somefont.ttf';

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $phrase);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);

}
?>

Now, in your form, use this:

      <form action="image.php" method="get">
         <textarea name="phrase"></textarea><br />
         <input type="submit" /><br />
      </form>

Accurax · May 30, 2007

how would that let me display the new image on the same page as the form and other html content? ... sorry mate i feel really dumb for not getting this

chigley · May 30, 2007

Oops, missed a bit off:

At the moment, your image.php file receives the variable by POST. Change it to $_GET so the image can be accessed like this:

image.php?phrase=value

In image.php use this code:

[code]<?php


if(isset($_GET['phrase'])) {

// Set the content-type
header("Content-type: image/png");

$phrase = stripslashes($_GET['phrase']);

// Create the image
$im = imagecreatetruecolor(400, 30);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);

//create a border
imagefilledrectangle($im, 1, 1, 398, 28, $white);

// define the path to the selected font
$font = 'somefont.ttf';

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $phrase);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);

}
?>

Now, in your form, use this:

      <form action="action.php" method="post">
         <textarea name="phrase"></textarea><br />
         <input type="submit" /><br />
      </form>

Now in action.php (can be in the same file as the form):

<?php

if(isset($_POST["phrase"])) {
$p = $_POST["phrase"];
echo "<img src=\"image.php?phrase=$p\" alt=\"\" />";
}

?>

[/code]

Accurax · May 30, 2007

OMG

I love you !!!

I love you I say !!

Thats amazing.... I changed the action to self, and it works ...

just onw thing.... I dont suppose you can explain how this works... it seems like magice to me right now....

How does the info get from the form to the image.... and how .... just how?

chigley · May 30, 2007

If the form has been submitted, the image is called using a GET variable, which is passed by the page with the form in. Glad it worked for you

Accurax · May 30, 2007

heres my form file ;

      <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
         <textarea name="phrase"></textarea><br />
         <input type="submit" /><br />
      </form>
  
  
<?php

if(isset($_POST["phrase"])) {
$p = $_POST["phrase"];
echo "<img src=\"test2.php?phrase=$p\" alt=\"\" />";
}

?>

There are not GET commands there ...... everythig is post ..... i dont "get" (hehe) how that works.... how is the information passing between the two files?

It dioesnt even look as if the page is reloading ..... how can the image creation file run without being loaded?

i think my head hurts ... but i really need to understand this .....

Is it the

echo "<img src=\"test2.php?phrase=$p\" alt=\"\" />";

that sends a request to the page where the image is created? ..... i think theres something mega here i need to understand... please

chigley · May 30, 2007

Yes look at how the image is called: ?phrase=$p where $p is what is entered in the form. Now look in test2.php (your image file) at how it receives the $phrase variable

Accurax · May 30, 2007

oooh .... so its like passing things via GET in the URL... except the url you passing the variables in is the <img src="">

chigley · May 30, 2007

Yeah

Sign In

Image creation and html output ? ... help please

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information