473,395 Members | 1,745 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

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 2914
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: Viken Karaguesian | last post by:
Hello everyone, Can anyone recommend a good online site to learn PHP? The W3Schools website is quite lacking - leaves much to be desired. I'm sure there are many places, but which ones are good?...
3
by: boyet59 | last post by:
VerosMedia.com offers professional, digital retouching and photo restoration services. ** Restoration of treasured, family photographs. ** Portrait and model portfolio retouching. ** Photo...
10
by: Steve | last post by:
I need to build a very dynamic client and would be interested in knowing the pros and cons of using JSF and Ajax to accomplish this. Thanks. Steve
0
by: gwanglu | last post by:
ProAOS offers you a high quality photo and video editing for your adult sites! We guarantee you customer satisfaction and a very reliable and professional work. If you want to try our services you...
0
by: Tarik Monem | last post by:
I have been working on an all AJAX/DOM web site which is set to go live today and I thought I'd share my discoveries with all of you whom have helped me when I have encountered different issues along...
1
by: rohitsharma | last post by:
<td><a href="./images/hos1.JPG"> <!--<img width="110" height="80" src="images/thumb_hos1.JPG" border="0"> --> <img...
8
by: gearoid | last post by:
Hey I've designed an intranet site where users can upload documents (called 'resources') as part of a knowledge base. Part of the functionality of said site is that privilaged users can edit the...
2
by: burtonfigg | last post by:
I'm testing an ajax page - this works fine in Firefox: http://jimpix.co.uk/clients/a/ecards/defaultx.asp Click on any of the links on the right under the 'occassions' or 'others' headings, in...
13
by: burtonfigg | last post by:
I have a snippet of HTML here: <p><a title="" href="#pc" onclick="sendEcardRequest(prev_ecard());">Previous</a> | <a title="" href="#pc" onclick="sendEcardRequest(next_ecard());">Next</a></p> <p...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.