Connecting Tech Pros Worldwide Help | Site Map
 
 
LinkBack Thread Tools Search this Thread
  #1  
Old May 12th, 2006, 11:25 AM
Manish
Guest
 
Posts: n/a
Default 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.

  #2  
Old May 15th, 2006, 11:05 AM
Andy Jeffries
Guest
 
Posts: n/a
Default Re: PHP + AJAX + Photo Editing

On Fri, 12 May 2006 03:20:02 -0700, Manish wrote:[color=blue]
> 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;[/color]

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

  #3  
Old May 16th, 2006, 01:35 PM
Manish
Guest
 
Posts: n/a
Default Re: PHP + AJAX + Photo Editing


Andy Jeffries wrote:[color=blue]
> On Fri, 12 May 2006 03:20:02 -0700, Manish wrote:[color=green]
> > 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;[/color]
>
> 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[/color]


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

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.

  #4  
Old May 16th, 2006, 01:35 PM
Manish
Guest
 
Posts: n/a
Default Re: PHP + AJAX + Photo Editing

/*

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;

}

 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 205,338 network members.