Member Avatar for abhishek2301

Hello,

I am trying to make a simple image editor by changing the brightness randomly.
I have a simple HTML page with an image and a button which is supposed to be clicked and the brightness of the image will change to a random value using POST method and a server-end PHP script.
The simple HTML is test.php as follows:

<html>
<head>
<title>
Image Editing
</title>
</head>
<body>
<p align="center"><img src="1810.jpg" border="0"></p>
<br>
<br>
<form method="post" action="zero.php">
<input type="submit" value="Change Brightness!" name="Brightness" >
</form>
<br>
<br>
</body>
</html>

The server-end PHP script (zero.php) to perform the image editing function is as follows:

<?php
if(isset($_POST['Brightness']))
{
$im = @imagecreatefromjpeg("1810.jpg");
$rand = rand(-255, 255);
imagefilter($im, IMG_FILTER_BRIGHTNESS, $rand);
header('Content-Type: image/jpeg');
imagejpeg($im, NULL, 75);
imagedestroy($im);
}
?>

This process works to a certain extent by changing brightness, but after clicking the image sent back from php is without any html info i.e., title of the page and the form submit buttons are lost.
My objective is to retain those info (title, form buttons) so that the user can click repeatedly to change the image brightness and the image sent back from the server should be always replaced only in its position.

I have also tried with the following option in a single test.php file:

<?php 
echo '<html>';
echo '<head>';
echo '<title>Image Editing</title>';
echo '</head>';
echo '<body>';
echo '<p align="center"><img src="1810.jpg" border="0"></p>';
echo '<br>';
echo '<br>';
if(isset($_POST['Brightness']))
{
$im = @imagecreatefromjpeg("1810.jpg");
$rand = rand(-255, 255);
imagefilter($im, IMG_FILTER_BRIGHTNESS, $rand);
header('Content-Type: image/jpeg');
imagejpeg($im, NULL, 75);
imagedestroy($im);
}
echo '<form method="post" action="test.php">';
echo '<input type="submit" value="Change Brightness!" name="Brightness">';
echo '</form>';
echo '<br>';
echo '<br>';
echo '</body>';
echo '</html>';
?>

The initial display page is fine but just after clicking the button, the page output gets messed up with the same image (no change in brightness) on the top followed by
"Warning: Cannot modify header information - headers already sent by" error and then a huge dump of junk characters which probably caused due to a header error and the received image cannot be properly rendered.

Why the initial approach don't work according to my expectation and what are the changes required to make it working?
Why the latter approach is causing header errors?

Thanks!

  • 3 Contributors
  • 4 Replies
  • 249 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

Well, on second load, you're declaring the file as an image, so it'll just show that.
Maybe:

<p align="center"><img src="zero.php?brightness=<?php echo $bright;?>" border="0"></p>

?

I'm afraid I can't use it as I have major php_gmp.dll problems :(

Member Avatar for cereal

You can point the form to an iframe through target attribute, so when you submit the form, only the iframe will be reloaded, an example:

<form action="a.php" target="result" method="post">
<input type="text" name="msg" /><br />
<input type="submit" name="submit" value="send" />
</form>

<iframe name="result" src="a.php"></iframe>

bye.

Member Avatar for abhishek2301

Thanks for the replies!
I want to replace the image at the same place where the initial image was placed.
I am displaying the unedited image using img src for the first time and then for each form submit I want to replace it with an edited version at the same position.
I tried with the iframe tag but it is created in a different container below the form button but the image is getting refreshed with each click and working perfectly.
But I want to place it by replacing the old image that was rendered using img src tag. In this case, the old image stays in the frame also.

How to connect the original image rendered using img src tag with the newly formed image at the server-end returned by the PHP script ?

Member Avatar for diafol

You can put the iframe above the the form for placement. ??

If you absolutely must have it in an img tag:

Keep separate files again:

zero.php

$im = @imagecreatefromjpeg("1810.jpg");
if(isset([B]$_GET[/B]['Brightness'])){
   $rand = rand(-255, 255);
   imagefilter($im, IMG_FILTER_BRIGHTNESS, $rand);
}
header('Content-Type: image/jpeg');
imagejpeg($im, NULL, 75);
imagedestroy($im);

test.php

<?php
$querystring = (isset($_POST['Brightness'])) ? '?Brightness=1' : '';
?>
<!-- you need a dtd!! -->
<html>
<head>
<title>Image Editing</title>
</head>
<body>
<p align="center"><img src="zero.php<?php echo $querystring;?>" border="0"></p><br /><br />
<form method="post" action="test.php">
<input type="submit" value="Change Brightness!" name="Brightness" />
</form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.