Introduction >>

As i announced in my birthday post: celebrating-1st-year-of-sajithmr.com , i am starting my post series How to make Photoshop Express in PHP

Before we starting the step by step procedure, have a look at : http://www.sajithmr.com/photoshop/index.php

This is a basic version of online photo editing tool.

You can either upload a photo to this tool or you can browse some images already supplied.

The basic features are:

1. Crop
2. Resize
3. Water marking (Both logo and text)
4. Round corner
5. Rotate
6. Download and save

Try yourself

Upload some picture (or browse any picture), Press crop button (top left), you can see orkut photo upload like crop there. You can select the area, or drag anywhere in the image. Press crop button in the workdesk. (Press F11 or fullscreen view for better performance )

Try all other features provided.

The whole site is divided into four parts.

1. Tools
2. Work Desk
3. Browse Photos
4. Settings

Tools area contains options for crop, resize, watermark, round, undo , save, clear all, download.

Here ‘clear all’ reset all the operations and navigate the website into initial settings.

From the Settings Area, You can fix the angle of the image. You can rotate either clock-wise or anti-clock-wise depending on the angle provided (+ve or -ve)

In Text Water Mark Setting Area, you can enter a text, set font size and font color. It generates a pictures corresponding to your text. Click water mark button in tool area and fix the position , press Apply Watermark

You can also upload your water mark logo.

Finally you can download the edited picture by clicking download button in the Tool area (top right) .

The interesting thing is the whole website / tool is created in a single day.

wanna learn how to implement this ??

Keep reading rest of the series.

In Online Photoshop in PHP (Series Part 2) >> Implementation of the Browse Photos Area

Thanks and Regards
Sajith M.R

Implementation of the Browse Photos Area >>

Today we will implement the browse photos area of online photoshop

Those who haven’t seen the online photo editing tool, click on the above icon (baloon)

You can see the browse area implementation here: http://www.sajithmr.com/photoshop-tuts/browse.php

What you need for this is 4 php functions: is_dir , opendir, readdir, filetype

Normal file browsing can be implemented using while loop with above four functions.

See its usage:

if (is_dir($dir)){if ($dh = opendir($dir)){

while ( ($file = readdir($dh)) !== false   )

{

if($file != '.' &&  $file != '..')

{

//if it is a directory show folder icon

if(  filetype($dir .$dir_sep. $file) == "dir"   )

{

//display a folder icon here with folder name using img tag

}

else

{

// display image here in img tag

}

}

}

}

}

The whole source code is here: http://www.sajithmr.com/photoshop-tuts/browse.zip

Resize a Photo >>

Today we will implement hows to resize photo into a particular width and height (or keeping aspect ratio)

See the live example from: http://www.sajithmr.com/photoshop-tuts/resize/resize.php

You need to install php-gd library to do this. To functions, imagecreatetruecolor and imagecopyresampled will do the resizing.

Those who have not seen the Online Photo Editing tool yet, have a look at: http://www.sajithmr.com/photoshop/index.php 

Here is the function:

function Resize($image,$new_width,$new_height=0)
{

 $old_width = imagesx($image);
 $old_height= imagesy($image);

 if($new_height==0) // if the height is not specified
                           //....calculate the relative height
 $new_height= $new_width * $old_height / $old_width ;

 $new_image= imagecreatetruecolor($new_width, $new_height);
 imagecopyresampled($new_image, $image, 0, 0, 0, 0, $new_width,
 $new_height, $old_width, $old_height);
 return $new_image;

}

Here the $image is the object of the image which is created from the function imagecreatefromgif($path_to_photo), if the image is in GIF format.

Other functions are imagecreatefromjpeg and imagecreatefrompng for JPEG and PNG respectively .

Download Full source code for this example from: http://www.sajithmr.com/photoshop-tuts/resize.zip

In the previous part we implemented browse photos area. http://www.sajithmr.com/online-photoshop-in-php-series-part-2/

In that for browsing picture files, we used full size image, instead of thumbnails. Here new example , in which browse photos is implemented with image thumbnails using resizing (150 px)

The difference is , instead of calling img tag’s src to the orginal image path, called through resize.php?img=path_to_image , passed the image path as parameter to resize function.

See live example: http://www.sajithmr.com/photoshop-tuts/browse-resize/browse.php

Take the html and see the difference from old browse implementation: http://www.sajithmr.com/photoshop-tuts/browse.php

Which is fast ??

Download the full source code for browsing with image thumbnail from: http://www.sajithmr.com/photoshop-tuts/browse-resize.zip

Keep reading for the coming series,  part 4 , Orkut Like Photo Cropping >>

Subscribe to this website feed now:

Regards

Sajith M.R

Online Photoshop in PHP (Series Part 4) >>

Today we will discuss about cropping of images using php and gd library.

Look at the simple example here:

http://www.sajithmr.com/photoshop-tuts/crop/simplecrop.php

Here the Crop function is doing the real work. x1 and y1 are Top-Left Coordinates of new image and x2, y2 are the Bottom-Right .

Here is the function for Crop

loadImageFromObject($image);
		$cc->cropToDimensions($xpos1, $ypos1, $xpos2,$ypos2 );
		return $cc->getImageObject();

	}

?>

You can see the class.cropcanvas.php file from the attachment.

In the above example, we have to enter each coordinates manually. See the example below:

http://www.sajithmr.com/photoshop-tuts/crop/realcrop.php

Here you can select the area by click and drag (like orkut)

This is implemented with the help or jslib javascript. The given attachment in the end of this post contains the all.

http://www.sajithmr.com/photoshop-tuts/crop.zip

Keep reading for the further posts in this series. Next post is on Intellegent watermarking on images.

Subscribe to my Feeds: http://www.sajithmr.com/feed/

Online Photoshop in PHP Part (5) >>

(image after watermarked with gmail logo)

Those who haven’t seen  the online photoshop tool created by me, just click here: http://www.sajithmr.com/photoshop

Today we will implement the watermarking on images using php gd library. Intelligent watermarking means, apply a logo or a watermark image on another image by measuring the color depth of the applied image. For this water marking, use png images as logo or watermark  for better results.

Live example for watermark implementation: http://sajithmr.com/photoshop-tuts/watermark/addwatermark.php

You can see different watermark location by changing the x1,y1 and x2,y2 parameters of the following url:

http://sajithmr.com/photoshop-tuts/watermark/showresult.php?x1=405&y1=285&x2=520&y2=392&width=115&height=107

See the watermark php source code here: http://sajithmr.com/photoshop-tuts/watermark/watermark.class.txt

Download the full-source code of watermarking implementation using php+gd from here: http://sajithmr.com/photoshop-tuts/watermark.rar