469,939 Members | 2,344 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,939 developers. It's quick & easy.

PHP + AJAX + Photo Editing

I am developing a photo gallery.

1. The user will be able to upload the photo
a) Edit the photo using various GD library functions
viz. flip, rotate, ...

2. AJAX is implemented in a small part

--------------------------------------------------------------------------------------------------------------------------------
ajax.php
--------------------------------------------------------------------------------------------------------------------------------

<?php
session_start();

?>
<html>
<head><script src="ajaxjs.js"></script></head>
<body>

<form name="theform" id="theform" action="" method="post">

Original : <img src="photo_full.jpg" border="0">

<br /><br />
Under Edit :
<div id="underEdit"></div>
<br />
<a href="#" onClick='beginEdit("0", "0", "0"); return false;'>Load
Original</a>&nbsp;
<!--
<a href="#" onClick='beginEdit("1", "angle", "-180"); return
false;'>Rotate -180%</a>&nbsp;
<a href="#" onClick='beginEdit("1", "angle", "-90"); return
false;'>Rotate -90%</a>&nbsp;
<a href="#" onClick='beginEdit("1", "angle", "90"); return
false;'>Rotate 90%</a>&nbsp;
<a href="#" onClick='beginEdit("1", "angle", "180"); return
false;'>Rotate 180%</a>&nbsp;
-->
<a href="#" onClick='beginEdit("2", "1", "0"); return false;'>Flip
Vertical</a>&nbsp;
<a href="#" onClick='beginEdit("2", "2", "0"); return false;'>Flip
Horizontal</a>&nbsp;

<br /><br />

</form>

</body>
</html>

<script language="JavaScript">

function beginEdit(edittype, valtype, valvalue) {
showImg(edittype, valtype, valvalue);
}

beginEdit("0", "0", "0");

</script>

--------------------------------------------------------------------------------------------------------------------------------
startedit.php
--------------------------------------------------------------------------------------------------------------------------------

<?php

$edittype = $_GET['edittype'];
$valtype = $_GET['valtype'];
$valvalue = $_GET['valvalue'];

echo ">> _GET >> "; print_r($_GET); echo " >> <br />";
echo '<img
src="getpic.php?edittype='.$edittype.'&valtype='.$ valtype.'&valvalue='.$valvalue.'"
/>';

?>

--------------------------------------------------------------------------------------------------------------------------------
getpic.php
--------------------------------------------------------------------------------------------------------------------------------

<?php
session_start();

$edittype = $_GET['edittype'];
$valtype = $_GET['valtype'];
$valvalue = $_GET['valvalue'];

//echo "get = "; print_r($_GET);

//if(count($_SESSION["imagers"])) {
// $imagers = $_SESSION["imagers"][count($_SESSION["imagers"])-1];
//} else {
$image = "photo_full.jpg";
$imagers = LoadJpeg($image);
//}
//$_SESSION["imagers"][count($_SESSION["imagers"])] = $imagers;
if($edittype == "0") {
imagejpeg($imagers);
} else if($edittype == "1") {

} else if($edittype == "2") {
if($valtype == "1") {
imagejpeg(flipImage($imagers, 1, 0));
} else if($valtype == "2") {
imagejpeg(flipImage($imagers, 0, 1));
}
}
function LoadJpeg($imgname)
{
$im = @imagecreatefromjpeg($imgname); /* Attempt to open */
if (!$im) { /* See if it failed */
$im = imagecreatetruecolor(150, 30); /* Create a black image */
$bgc = imagecolorallocate($im, 255, 255, 255);
$tc = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 150, 30, $bgc);
/* Output an errmsg */
imagestring($im, 1, 5, 5, "Error loading $imgname", $tc);
}
return $im;
}
function flipImage($image, $vertical, $horizontal) {
$w = imagesx($image);
$h = imagesy($image);

if (!$vertical && !$horizontal) return $image;

$flipped = imagecreatetruecolor($w, $h);

if ($vertical) {
for ($y=0; $y<$h; $y++) {
imagecopy($flipped, $image, 0, $y, 0, $h - $y - 1, $w, 1);
}
}

if ($horizontal) {
if ($vertical) {
$image = $flipped;
$flipped = imagecreatetruecolor($w, $h);
}

for ($x=0; $x<$w; $x++) {
imagecopy($flipped, $image, $x, 0, $w - $x - 1, 0, 1, $h);
}
}

return $flipped;
}
?>

--------------------------------------------------------------------------------------------------------------------------------

The problem is that howmuch times I click on Flip Horizontal , it is
done on the original picture, I want it to be on the latest edited one.

Present :

Original >> Flip Horizontal + Flip Horizontal ... >> Flip Horizontal

Needed :

Original >> Flip Horizontal + Flip Horizontal >> Back to Original
I tried using session, but it didn't worked

if(count($_SESSION["imagers"])) {
$imagers = $_SESSION["imagers"][count($_SESSION["imagers"])-1];
} else {
$image = "photo_full.jpg";
$imagers = LoadJpeg($image);
}
$_SESSION["imagers"][count($_SESSION["imagers"])] = $imagers;

Any idea/reference on how to do it.

Thanks.

May 12 '06 #1
3 2698
On Fri, 12 May 2006 03:20:02 -0700, Manish wrote:
The problem is that howmuch times I click on Flip Horizontal , it is done
on the original picture, I want it to be on the latest edited one.

I tried using session, but it didn't worked

if(count($_SESSION["imagers"])) {
$imagers = $_SESSION["imagers"][count($_SESSION["imagers"])-1];
} else {
$image = "photo_full.jpg";
$imagers = LoadJpeg($image);
}
$_SESSION["imagers"][count($_SESSION["imagers"])] = $imagers;


This code should work. Have you tried doing a print_r or var_dump on
$_SESSION after doing a single operation?

BTW, that last line can be written a lot more simply as:

$_SESSION["imagers"][] = $imagers;

Cheers,
Andy
--
Andy Jeffries MBCS CITP ZCE | gPHPEdit Lead Developer
http://www.gphpedit.org | PHP editor for Gnome 2
http://www.andyjeffries.co.uk | Personal site and photos

May 15 '06 #2

Andy Jeffries wrote:
On Fri, 12 May 2006 03:20:02 -0700, Manish wrote:
The problem is that howmuch times I click on Flip Horizontal , it is done
on the original picture, I want it to be on the latest edited one.

I tried using session, but it didn't worked

if(count($_SESSION["imagers"])) {
$imagers = $_SESSION["imagers"][count($_SESSION["imagers"])-1];
} else {
$image = "photo_full.jpg";
$imagers = LoadJpeg($image);
}
$_SESSION["imagers"][count($_SESSION["imagers"])] = $imagers;


This code should work. Have you tried doing a print_r or var_dump on
$_SESSION after doing a single operation?

BTW, that last line can be written a lot more simply as:

$_SESSION["imagers"][] = $imagers;

Cheers,
Andy
--
Andy Jeffries MBCS CITP ZCE | gPHPEdit Lead Developer
http://www.gphpedit.org | PHP editor for Gnome 2
http://www.andyjeffries.co.uk | Personal site and photos

------------------------------------------------------------------------------------------------------------------------

With the code as follows

echo "_SESSION = <br /><br />"; var_dump($_SESSION);
echo "<br /><br /><br /><br />";

if(count($_SESSION["imagers"])) {
$imagers = $_SESSION["imagers"][count($_SESSION["imagers"])-1];
} else {
$image = "treesplain.jpg";
$imagers = LoadJpeg($image);
}

if($edittype == "0") {
$changedimagers = $imagers;
unset($_SESSION["imagers"]);
} else if($edittype == "1") {

} else if($edittype == "2") {

if($valtype == "1") {
$changedimagers = flipImage($imagers, 1, 0);
} else if($valtype == "2") {
$changedimagers = flipImage($imagers, 0, 1);
}
}

if($changedimagers) {
$_SESSION["imagers"][count($_SESSION["imagers"])] = $changedimagers;
imagejpeg($changedimagers);
}

echo "_SESSION = <br /><br />"; var_dump($_SESSION);
echo "<br /><br /><br /><br />";
------------------------------------------------------------------------------------------------------------------------

1. Close browser

2. http://localhost/test/manipulation/g...php?edittype=0
_SESSION =

array(0) { }

{Random characters, for image}

array(1) { ["imagers"]=> array(1) { [0]=> resource(3) of type (gd) } }

3. Change the URL in same browser to
http://localhost/test/manipulation/g...pe=2&valtype=1
_SESSION =

array(1) { ["imagers"]=> array(1) { [0]=> int(0) } }
Warning: imagesx(): supplied argument is not a valid Image resource in
c:\program files\easyphp1-8\www\test\manipulation\getpic.php on line 63

Warning: imagesy(): supplied argument is not a valid Image resource in
c:\program files\easyphp1-8\www\test\manipulation\getpic.php on line 64

Warning: imagecreatetruecolor(): Invalid image dimensions in c:\program
files\easyphp1-8\www\test\manipulation\getpic.php on line 69
_SESSION =

array(1) { ["imagers"]=> array(1) { [0]=> int(0) } }
------------------------------------------------------------------------------------------------------------------------

To solve the problem, I save all the steps in the session and redo
steps 1 to current one all over again.

$_SESSION['imagersop'][count($_SESSION['imagersop'])] = array(
"edittype"=>$edittype, "valtype"=>$valtype, "valvalue"=>$valvalue,
);

for($step=0; $step<count($_SESSION['imagersop']); $step++) {

$edittype = $_SESSION['imagersop'][$step]['edittype'];
$valtype = $_SESSION['imagersop'][$step]['valtype'];
$valvalue = $_SESSION['imagersop'][$step]['valvalue'];

-------------

}

One can understand that after about 10 steps, it's really slow as all
steps has to be re performed.

I didn't find any other solution, so I implement this. But some other
way has to be there.

May be we can limit the history to first + (latest 6) + last in
session.

Some more response is required in,

1. brightness, contrast
I do not want to save the image as in imagefilter, but to temporary
store it as with rotate and flipping

2. sharpening issues

i got this code phpUnsharpMask from somewhere in the internet, but
no change is visible for any parameters.

see the code in my next post.
Thanks.

May 16 '06 #3
/*

Explanation: See the heading of the script itself, below.
Setup: Copy the following code and paste it into your image editing
script.
Requirements: The phpUnsharpMask script requires php version 4.0.6 or
higher and Thomas Boutell's gd library version 2.0 or higher. From php
version 4.3.1 gd is included.
Last modified: February 22, 2005
WARNING! Due to a known bug in PHP 4.3.2 this script is not working
well in this version. The sharpened images get too dark. The bug is
fixed in version 4.3.3.
Unsharp masking is a traditional darkroom technique that has proven
very suitable for
digital imaging. The principle of unsharp masking is to create a
blurred copy of the image
and compare it to the underlying original. The difference in colour
values
between the two images is greatest for the pixels near sharp edges.
When this
difference is subtracted from the original image, the edges will be
accentuated.

The Amount parameter simply says how much of the effect you want. 100
is 'normal'.
Radius is the radius of the blurring circle of the mask. 'Threshold' is
the least
difference in colour values that is allowed between the original and
the mask. In practice
this means that low-contrast areas of the picture are left unrendered
whereas edges
are treated normally. This is good for pictures of e.g. skin or blue
skies.

Any suggenstions for improvement of the algorithm, expecially regarding
the speed
and the roundoff errors in the Gaussian blur process, are welcome.

*/

function UnsharpMask($img, $amount, $radius, $threshold) {

////////////////////////////////////////////////////////////////////////////////////////////////

////
//// p h p U n s h a r p M a s k
////
//// Unsharp mask algorithm by Torstein Hønsi 2003.
//// thoensi_at_netcom_dot_no.
//// Please leave this notice.
////
///////////////////////////////////////////////////////////////////////////////////////////////

// $img is an image that is already created within php using
// imgcreatetruecolor. No url! $img must be a truecolor image.

// Attempt to calibrate the parameters to Photoshop:
if ($amount > 500) $amount = 500;
$amount = $amount * 0.016;
if ($radius > 50) $radius = 50;
$radius = $radius * 2;
if ($threshold > 255) $threshold = 255;

$radius = abs(round($radius)); // Only integers make sense.
if ($radius == 0) {
return $img; ]
imagedestroy($img);
break;
}

$w = imagesx($img); $h = imagesy($img);
$imgCanvas = imagecreatetruecolor($w, $h);
$imgCanvas2 = imagecreatetruecolor($w, $h);
$imgBlur = imagecreatetruecolor($w, $h);
$imgBlur2 = imagecreatetruecolor($w, $h);
imagecopy ($imgCanvas, $img, 0, 0, 0, 0, $w, $h);
imagecopy ($imgCanvas2, $img, 0, 0, 0, 0, $w, $h);
// Gaussian blur matrix:
//
// 1 2 1
// 2 4 2
// 1 2 1
//
//////////////////////////////////////////////////

// Move copies of the image around one pixel at the time and merge
them with weight
// according to the matrix. The same matrix is simply repeated for
higher radii.
for ($i = 0; $i < $radius; $i++) {
imagecopy ($imgBlur, $imgCanvas, 0, 0, 1, 1, $w - 1, $h - 1); // up
left
imagecopymerge ($imgBlur, $imgCanvas, 1, 1, 0, 0, $w, $h, 50); //
down right
imagecopymerge ($imgBlur, $imgCanvas, 0, 1, 1, 0, $w - 1, $h,
33.33333); // down left
imagecopymerge ($imgBlur, $imgCanvas, 1, 0, 0, 1, $w, $h - 1, 25); //
up right
imagecopymerge ($imgBlur, $imgCanvas, 0, 0, 1, 0, $w - 1, $h,
33.33333); // left
imagecopymerge ($imgBlur, $imgCanvas, 1, 0, 0, 0, $w, $h, 25); //
right
imagecopymerge ($imgBlur, $imgCanvas, 0, 0, 0, 1, $w, $h - 1, 20 );
// up
imagecopymerge ($imgBlur, $imgCanvas, 0, 1, 0, 0, $w, $h, 16.666667);
// down
imagecopymerge ($imgBlur, $imgCanvas, 0, 0, 0, 0, $w, $h, 50); //
center
imagecopy ($imgCanvas, $imgBlur, 0, 0, 0, 0, $w, $h);

// During the loop above the blurred copy darkens, possibly due to a
roundoff
// error. Therefore the sharp picture has to go through the same loop
to
// produce a similar image for comparison. This is not a good thing,
as processing
// time increases heavily.
imagecopy ($imgBlur2, $imgCanvas2, 0, 0, 0, 0, $w, $h);
imagecopymerge ($imgBlur2, $imgCanvas2, 0, 0, 0, 0, $w, $h, 50);
imagecopymerge ($imgBlur2, $imgCanvas2, 0, 0, 0, 0, $w, $h,
33.33333);
imagecopymerge ($imgBlur2, $imgCanvas2, 0, 0, 0, 0, $w, $h, 25);
imagecopymerge ($imgBlur2, $imgCanvas2, 0, 0, 0, 0, $w, $h,
33.33333);
imagecopymerge ($imgBlur2, $imgCanvas2, 0, 0, 0, 0, $w, $h, 25);
imagecopymerge ($imgBlur2, $imgCanvas2, 0, 0, 0, 0, $w, $h, 20 );
imagecopymerge ($imgBlur2, $imgCanvas2, 0, 0, 0, 0, $w, $h,
16.666667);
imagecopymerge ($imgBlur2, $imgCanvas2, 0, 0, 0, 0, $w, $h, 50);
imagecopy ($imgCanvas2, $imgBlur2, 0, 0, 0, 0, $w, $h);

}

// Calculate the difference between the blurred pixels and the
original
// and set the pixels
for ($x = 0; $x < $w; $x++) { // each row
for ($y = 0; $y < $h; $y++) { // each pixel

$rgbOrig = ImageColorAt($imgCanvas2, $x, $y);
$rOrig = (($rgbOrig >> 16) & 0xFF);
$gOrig = (($rgbOrig >> 8) & 0xFF);
$bOrig = ($rgbOrig & 0xFF);

$rgbBlur = ImageColorAt($imgCanvas, $x, $y);

$rBlur = (($rgbBlur >> 16) & 0xFF);
$gBlur = (($rgbBlur >> 8) & 0xFF);
$bBlur = ($rgbBlur & 0xFF);

// When the masked pixels differ less from the original
// than the threshold specifies, they are set to their original
value.
$rNew = (abs($rOrig - $rBlur) >= $threshold)
? max(0, min(255, ($amount * ($rOrig - $rBlur)) + $rOrig))
: $rOrig;
$gNew = (abs($gOrig - $gBlur) >= $threshold)
? max(0, min(255, ($amount * ($gOrig - $gBlur)) + $gOrig))
: $gOrig;
$bNew = (abs($bOrig - $bBlur) >= $threshold)
? max(0, min(255, ($amount * ($bOrig - $bBlur)) + $bOrig))
: $bOrig;

if (($rOrig != $rNew) || ($gOrig != $gNew) || ($bOrig != $bNew)) {
$pixCol = ImageColorAllocate($img, $rNew, $gNew, $bNew);
ImageSetPixel($img, $x, $y, $pixCol);
}
}
}

imagedestroy($imgCanvas);
imagedestroy($imgCanvas2);
imagedestroy($imgBlur);
imagedestroy($imgBlur2);

return $img;

}

May 16 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

13 posts views Thread by Viken Karaguesian | last post: by
10 posts views Thread by Steve | last post: by
1 post views Thread by rohitsharma | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.