TalkPHP

TalkPHP (http://www.talkphp.com/forums.php)
-   Advanced PHP Programming (http://www.talkphp.com/advanced-php-programming/)
-   -   Cropping Images using PHP (http://www.talkphp.com/advanced-php-programming/1709-cropping-images-using-php.html)

Rendair 12-11-2007 05:53 PM

Cropping Images using PHP
 
I thought i would write a nice tutorial on how to crop images using php.

Demo:HERE

What will it do?

This script will allow you to make a smaller image of a bigger image, but at the same time crop it. This will prevent the image looking stretched and deformed.

We will create this using a class (Sorry using PHP 4 at the moment, but should work on 5)
Firstly lets set up the class.

PHP Code:

class cropImage{
 
//code here


Now we need to set up some variables to be used throughout the program.

PHP Code:

var $imgSrc,$myImage,$cropHeight,$cropWidth,$x,$y,$thumb

The variables above will be explained once we use them. Now we need to create the first function. This function will get the image we are going to crop, work out its dimension and then use them dimensions to work out how we are going to crop it.

PHP Code:


function setImage($image)
{

//Your Image
   
$this->imgSrc $image
                     
//getting the image dimensions
   
list($width$height) = getimagesize($this->imgSrc); 
                     
//create image from the jpeg
   
this->myImage imagecreatefromjpeg($this->imgSrc) or die("Error: Cannot find image!"); 
            
       if(
$width $height$biggestSide $width//find biggest length
       
else $biggestSide $height
                     
//The crop size will be half that of the largest side 
   
$cropPercent .5// This will zoom in to 50% zoom (crop)
   
$this->cropWidth   $biggestSide*$cropPercent
   
$this->cropHeight  $biggestSide*$cropPercent
                     
                     
//getting the top left coordinate
   
$this->= ($width-$this->cropWidth)/2;
   
$this->= ($height-$this->cropHeight)/2;
             


Now we actually need to start creating the actual cropped image.

PHP Code:

function createThumb()
{
                    
  
$thumbSize 250// will create a 250 x 250 thumb
  
$this->thumb imagecreatetruecolor($thumbSize$thumbSize); 

  
imagecopyresampled($this->thumb$this->myImage00,$this->x$this->y$thumbSize$thumbSize$this->cropWidth$this->cropHeight); 


Now all we need to do is render the image out.

PHP Code:

function renderImage()
{
                     
   
header('Content-type: image/jpeg');
   
imagejpeg($this->thumb);
   
imagedestroy($this->thumb); 


Now we just need to create the instance

PHP Code:

$image = new cropImage;
$image->setImage($src);
$image->createThumb();
$image->renderImage(); 

You can use this script to display a thumb of images on a new page, by using the following page.

PHP Code:

<img src="thumbcreate.php?src=images/largimg.jpg"//link to large image 


ReSpawN 12-11-2007 07:31 PM

Awesome script! I've skimmed the edges but it looks very nice!

Say, do you have any scripts for the "Wet Floor" effect?

Wildhoney 12-11-2007 07:39 PM

The wet floor effect? :-!


ReSpawN 12-11-2007 07:44 PM

... Dude ? How the hell did you do that? :P Last time I can recall it has been referred to as "The Wet Floor" effect. Thus giving a similar reflexion with a gradient, slowly fading out the text into the base color of the layout.

How did you manage that Wildhoney?

Rendair 12-11-2007 07:58 PM

Yes i do actually have a "wet floor effect" let me sort it out and ill post a tutorial. :-)

ReSpawN 12-11-2007 08:53 PM

Awesome man! That would come in handy! I'll be looking forward to the tutorial and the script behind it. Only one notion, can you make it compatible with PHP 4 and up as well? Since some of my customers still do not use 5+.

Thanks a bunch!

Mark

Orc 12-12-2007 04:51 PM

The "Wet Floor" effect is actually pretty easy in Photoshop! Or in my standards it is :p

Rendair 12-12-2007 09:03 PM

Yeah indeed the wet floor effect is easy to do in photoshop, but to be able to do it via a website and to alot of images at once would be better. :-)

Jay 12-12-2007 09:05 PM

I wanna know how Wildhoney did his, with PHP or Photoshop! :-P

Wildhoney 12-14-2007 02:36 PM

I used Photoshop :-) I was asking if that's how you wanted it. That's a task for the GD master - Rendair! In extension to his article the other day on reflections.

ReSpawN 12-14-2007 03:06 PM

Yeah that was a good article. We're gonna expand it when we both have the time. Since I am pretty interested in the whole thing, it might be neat to implement it into my CMS.

Salathe 12-14-2007 04:01 PM



Fig. 1: Funky little reflections, careful you don't slip on the wet surface!
I was curious to see whether it was possible to approximate Wildhoney's photoshopped version of the wet floor using GD and I'm always up for a challenge. After playing around with a few different techniques I came up with something and the result can be seen above (Fig. 1, using some of Dale's images, thanks!) -- do you think that would qualify as a 'wet floor' effect?

Essentially, I just place a 'wave' to the reflection and add a little blur. The code itself is still very raw (read: a procedural mess!!!) but that can be refactored easily enough. I just want to say, it wasn't easy getting my head around the problem (though insomnia can lead to some creative solutions)! *!*

Rendair 12-14-2007 04:14 PM

Well personally i think your code would class as more of a wet floor effect considering water ripples when it reflects. I would be very much interested in seeing the code and also, nice one using my images :-) looks cool.

Matt83 12-14-2007 04:39 PM

Quote:

Originally Posted by Salathe (Post 6627)


Fig. 1: Funky little reflections, careful you don't slip on the wet surface!
I was curious to see whether it was possible to approximate Wildhoney's photoshopped version of the wet floor using GD and I'm always up for a challenge. After playing around with a few different techniques I came up with something and the result can be seen above (Fig. 1, using some of Dale's images, thanks!) -- do you think that would qualify as a 'wet floor' effect?

Essentially, I just place a 'wave' to the reflection and add a little blur. The code itself is still very raw (read: a procedural mess!!!) but that can be refactored easily enough. I just want to say, it wasn't easy getting my head around the problem (though insomnia can lead to some creative solutions)! *!*

That looks very good ^^ would you mind posting a higher res screenshot?

Salathe 12-14-2007 10:27 PM

Quote:

Originally Posted by Matt83 (Post 6630)
That looks very good ^^ would you mind posting a higher res screenshot?

Sure, http://i19.photobucket.com/albums/b1...tfloor-big.jpg (linked because it's too wide for here) :-)

danielneri 12-25-2007 05:17 PM

Hey real nice tutorial! Lots to learn here, I'll prolly be using that in the future :p

ReSpawN 12-26-2007 09:57 AM

Quote:

Originally Posted by Salathe (Post 6656)
Sure, http://i19.photobucket.com/albums/b1...tfloor-big.jpg (linked because it's too wide for here) :-)

Looks good, it's a different version as the one Dale made, but it looks good as well. ;-) Post the code if you have the time.

Kalle 01-02-2008 11:39 AM

The wet floor effect can be made pretty easily using GD. All it requires is to mirror some of the image and apply a custom made wave filter on it, like the wave filter used in vBulletin's captha functions =)

ReSpawN 01-02-2008 01:47 PM

Haven't seen it yet. If Salathe could just paste code, I could have a look at it. :-) NO idea what so ever how to create a wave filter. :-)

ronsper 09-05-2011 12:06 AM

Change default black background
 
How do you change the default black background to white?


All times are GMT. The time now is 02:55 AM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0