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

Today i implemented gmail chat window , not an ajax chat with a chat server, but its client side implementation.

Here you can see the demo: http://www.sajithmr.com/gtalk/

Take this link in a new tab or window, and take any other website without closing it.

After 3 seconds , (Consider it as a new chat message arrived situation) you can see the google chat notification sound , and title changing. (I didn’t get the actual gtalk notification sound, so i used windows notify.wav file )

You know google (gmail) implemented its sound notification is via swf object. Here me too done the same.

I wrote two function to check whether the browser is in focus or not.

Here is the functions:

function lostFocus()
{
document.title = 'Sajith M.R Says...';
state = 'nonfocus';

played =  0 ;

changeColorRed();

alterTitle();

}

function gotFocus()
{
document.title = 'Gmail Inbox(1)';

state = 'focus';

played = 0 ;
}

The alterTitle() function calls in 3 seconds setTimeOut manner.

function alterTitle()
{

if(state =='nonfocus')

{
if ( document.title == 'Gmail Inbox(1)')
{

if(played == 0)
{
soundManager.play('notify');
played = 1;
}

document.title = 'Sajith M.R Says...';

}
else
document.title = 'Gmail Inbox(1)';

setTimeout("alterTitle()",3000);

}
}

The soundmanager.js file handles the swf flash object and sound triggering.

<script type=”text/javascript” src=”script/soundmanager.js”></script>

These three simple scripts together created this demo: http://www.sajithmr.com/gtalk/

If you want the whole source code , mail me: admin@sajithmr.com

Comment Please …

Regards

Sajith.M.R
http://www.sajith.name