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

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/

If you want to get the FLV file of any youtube video url using php code, here is the solution.

If you are a PHP Programmer and if you are working with any video website, and if you need to grab videos (FLV files) from youtube and to put it yourown site (not object embedding) , Download the Full Source Code given at the end of this article (ZIP)

I used this php code for the Youtube video download tool http://www.googleneedle.com

Here function getPatternFromUrl is nothing but, get the exact pattern of a particular video from any youtube video url format.

In the above case , it returns pzmP4UvZRa4

The function is below

function getPatternFromUrl($url)

 {

$url = $url.'&';

$pattern = '/v=(.+?)&+/';

preg_match($pattern, $url, $matches);

return ($matches[1]);

}

GetFlvFromYoutube is the main function here, which download the flv file from youtube pattern and saves to your local machine.
The function is below:

function GrabFlvFromYoutube( $pattern )
{

 require_once ("phptube.php");

 $tube = new PHPTube ();

 $flv_http_path = $tube->download($pattern) ;

 echo $flv_http_path;

 set_time_limit(0);

 $data = file_get_contents($flv_http_path);

 $new_flv_path = dirname(_FILE_).'/flvs/'.$pattern.'.flv' ;

 file_put_contents($new_flv_path, $data);

 return $new_flv_path ;

}

Download the fullsource code from this link given:

http://www.sajithmr.com/downloads/youtube-download-php.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

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

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

You can simulate the post method using php without the help of curl library.
download full source code:

See the code below:

function do_post_request($url, $data, $optional_headers = null) {

$params = array('http' =>; array('method' =>; 'POST',

'content' =>; $data

));

if ($optional_headers !== null) {

$params['http']['header'] = $optional_headers;

}

$ctx = stream_context_create($params);

$fp = @fopen($url, 'rb', false, $ctx);

if (!$fp) {

throw new Exception("Problem with $url, $php_errormsg");

}

$response = @stream_get_contents($fp);

if ($response === false) {

throw new Exception("Problem reading data from $url, $php_errormsg");

}

return $response;

}

?>

Download the full source code from post_without_curl.zip

I think you know the use of OpenID. Else go here and learn

http://en.wikipedia.org/wiki/OpenID
http://openid.net/what/
http://openiddirectory.com/

In a nutshell, the OpenID technology makes life simpler by having only one username and password to remember - yahoo OpenID tour

Here the php source code for integrating your site with OpenID. If you have a website which has user login / signup options , you can also add openID authentication so that user can login into your site with there OpenID

php-openid-2.0.zip

(tested in windows. read the README file before installing. set $store_path = “/tmp” to a directory according to OS)

Visit this url: http://openidenabled.com/ for other languages (phython, ruby etc)

Wordpress theme is merely a folder which is to be placed in wp-content folder of wordpress hierarchy .

The basic files needed in that theme folder is index.php and style.css

In this style.css the following lines are very essential.
/*

Theme Name: Theme Namet

Theme URI: http://www.sajithmr.com/

Description: Details of your theme

Author: Author name

Author URI: http://www.sajithmr.com/

This theme was designed and built by Sajith

The CSS, XHTML and design is released under GPL

http://www.opensource.org/licenses/gpl-license.php

*/
Design your theme (static page) and put this as index.php in theme folder. Go to wordpress admin panel and set the current theme as the theme you created now. Then you can see the static design created by you.

Next step is make each part dynamic. For example if you want to make your blog title dynamic , replace your static code with

<?php wp_title(); ?>

Make your style sheet path also dynamic by : <link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />

Like this , there is a lot of built in dynamic functions in wordpress.I will give you some links at the end of this post .

Another , very special , feature of wordpress theme is its hierarchy. You can sub divide the index.php files into a lot of sub files. See the below picture

(Click on the picture to see full size)

This picture shows the control flow whenever a particular url request arrives. For example you can write all the code for footer in footer.php and can include this file in your index.php file as

<?php get_footer(); ?>

Some important wordpress dynamic functions:

Function for showing posts:

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php the_content(’Read More »’); ?>

<?php break;?>

<?php endwhile; ?>
<?php endif; ?>

See this link for further development: http://codex.wordpress.org/Theme_Development

Some useful functions:

<?php wp_list_categories(’title_li=’); ?> /* Listing categories */

<?php edit_post_link(’Edit this entry.’,”,”); ?> /* Post edit link*/

<?php the_category() ?> /* Shows current category*/

<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’);?> /* Page Links*/

<?php wp_head(); ?> /* Head information */

<?php wp_loginout(); ?> /* Login / logout links*/

<?php the_permalink() ?> /* Get the permalink */

<?php the_excerpt(); ?> /* Get the short description of a post*/

<?php posts_nav_link(’ — ‘, __(’« Older Posts’), __(’Newer Posts »’)); ?> /*Page navigation*/

The new web 2.0 displays time and date not in old style manner like 12.30 pm Jan 200 7. The new generation need relative time like 2 hours ago, 6 months ago, 4 years ago, very old etc. So if you save the timestamp of a particular content creation in database we can simply show this ‘ago time calculation’ using the following algorithm.

//$datefrom is the timestamp for the content , and you can leave the $dateto value to see the current delay

function TimeAgo($datefrom,$dateto=-1)
{
// Defaults and assume if 0 is passed in that
// its an error rather than the epoch

if($datefrom<=0) { return "A long time ago"; }
if($dateto==-1) { $dateto = time(); }

// Calculate the difference in seconds betweeen
// the two timestamps

$difference = $dateto - $datefrom;

// If difference is less than 60 seconds,
// seconds is a good interval of choice

if($difference < 60)
{
$interval = "s";
}

// If difference is between 60 seconds and
// 60 minutes, minutes is a good interval
elseif($difference >= 60 && $difference<60*60)
{
$interval = "n";
}

// If difference is between 1 hour and 24 hours
// hours is a good interval
elseif($difference >= 60*60 && $difference<60*60*24)
{
$interval = "h";
}

// If difference is between 1 day and 7 days
// days is a good interval
elseif($difference >= 60*60*24 && $difference<60*60*24*7)
{
$interval = "d";
}

// If difference is between 1 week and 30 days
// weeks is a good interval
elseif($difference >= 60*60*24*7 && $difference <
60*60*24*30)
{
$interval = "ww";
}

// If difference is between 30 days and 365 days
// months is a good interval, again, the same thing
// applies, if the 29th February happens to exist
// between your 2 dates, the function will return
// the 'incorrect' value for a day
elseif($difference >= 60*60*24*30 && $difference <
60*60*24*365)
{
$interval = "m";
}

// If difference is greater than or equal to 365
// days, return year. This will be incorrect if
// for example, you call the function on the 28th April
// 2008 passing in 29th April 2007. It will return
// 1 year ago when in actual fact (yawn!) not quite
// a year has gone by
elseif($difference >= 60*60*24*365)
{
$interval = “y”;
}

// Based on the interval, determine the
// number of units between the two dates
// From this point on, you would be hard
// pushed telling the difference between
// this function and DateDiff. If the $datediff
// returned is 1, be sure to return the singular
// of the unit, e.g. ‘day’ rather ‘days’

switch($interval)
{
case “m”:
$months_difference = floor($difference / 60 / 60 / 24 /
29);
while (mktime(date(”H”, $datefrom), date(”i”, $datefrom),
date(”s”, $datefrom), date(”n”, $datefrom)+($months_difference),
date(”j”, $dateto), date(”Y”, $datefrom)) < $dateto)
{
$months_difference++;
}
$datediff = $months_difference;

// We need this in here because it is possible
// to have an 'm' interval and a months
// difference of 12 because we are using 29 days
// in a month

if($datediff==12)
{
$datediff--;
}

$res = ($datediff==1) ? "$datediff month ago" : "$datediff
months ago";
break;

case "y":
$datediff = floor($difference / 60 / 60 / 24 / 365);
$res = ($datediff==1) ? "$datediff year ago" : "$datediff
years ago";
break;

case "d":
$datediff = floor($difference / 60 / 60 / 24);
$res = ($datediff==1) ? "$datediff day ago" : "$datediff
days ago";
break;

case "ww":
$datediff = floor($difference / 60 / 60 / 24 / 7);
$res = ($datediff==1) ? "$datediff week ago" : "$datediff
weeks ago";
break;

case "h":
$datediff = floor($difference / 60 / 60);
$res = ($datediff==1) ? "$datediff hour ago" : "$datediff
hours ago";
break;

case "n":
$datediff = floor($difference / 60);
$res = ($datediff==1) ? "$datediff minute ago" :
"$datediff minutes ago";
break;

case "s":
$datediff = $difference;
$res = ($datediff==1) ? "$datediff second ago" :
"$datediff seconds ago";
break;
}
return $res;
}

When you send mail from php code, you use mail() function for this purpose. Here is another library from PEAR for sending MIME mails including html mails, attachments, inline picture attachment , plain text mail etc.

The steps to install this library is :

pear install http://download.pear.php.net/package/Mail_Mime-1.5.2.tgz
pear install Mail

(you need a pre-installed PEAR library)

From the php code you can create a function for sending mails

public function sendMail($Content,$to,$subject,$from=’no-reply@mysite.com’, $type=’html’,$attachment=false )
{
require_once (”Mail.php”);
require_once (”Mail/mime.php”);

$crlf = “\n”;
$hdrs = array(
           ‘From’ => $from,
            ‘Subject’ => $subject
            );

$mime = new Mail_mime($crlf);

if($type== ‘html’)
     $mime->setHTMLBody($Content); // html content
else
     $mime->setTXTBody($Content); // test content

//you can pass $attachment as array of file paths
if($attachment)
  foreach($attachment as $file)
      $mime->addAttachment($file, ‘image/jpeg’);

//do not ever try to call these lines in reverse order
$body = $mime->get();
$hdrs = $mime->headers($hdrs);

$mail =& Mail::factory(’mail’);
$mail->send($to, $hdrs, $body);
}

You can use this link for another example: http://pear.php.net/manual/en/package.mail.mail-mime.example.php

For more examples go : http://pear.php.net/manual/en/package.mail.mail-mime.php

Now we can see ajax everywhere. Most of the famous websites are now enabled ajax for providing faster navigation and browsing speed.

If you are a gmail user, the thing you noticed very attractively should be the file attaching part of the email composing window.

If you wait for sometime you can see, your file gets automatically uploaded without submitting the whole form. This is not Ajax. Because XMLHttpRequest (XHR) is not supporting multipart/form-data.

You can use iframe for this purpose by pointing the target of form submission towards the iframe (you can place it as hidden style=”display:none”)

<form target=”iframename” action=”upload.php”>

You can write javascript at the upload.php end, you can change the file uploaded updations just like ajax

Sample code for this “Ajax File Upload” or Gmail-Like File Upload is here :
File-Upload-Like-Gmail.rar

Thanks and Regards

Sajith.M.R