(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

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

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.me/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