Image Reflections in PHP

Rendair · 12-11-2007, 10:58 PM

Now this is a pretty simple tutorial on how to create a nice simple reflection on images. This won't show you how to make little ripples just yet.

You can view an example of what this script can do. HERE

Firstly we need to define the image we are reflecting and get its size. (Width & Height)

PHP Code:


			


$imgName = $src;

$size = getimagesize("$imgName");

Now we want to load the image into GD and also set some values like placing the height and width of the image into variables, but also set the height of the actual reflection image.

PHP Code:


			
$imgImport = imagecreatefromjpeg($imgName);





$imgName_w = $size[0];

$imgName_h = $size[1];





$gradientHeight = 100;

Now we want to actually create the image background that the reflection will be placed on

PHP Code:


			
// Create new blank image with sizes.

$background = imagecreatetruecolor($imgName_w, $gradientHeight);

Now we need to set some variables up for the background colour of the actual reflect and also the line height that will devide the reflection from the actual image itself.

PHP Code:


			
$gradientColor = "255 255 255"; //White

$gradparts = explode(" ",$gradientColor); // get the parts of the  colour (RRR,GGG,BBB)

$dividerHeight = 1;

Now we need to set a starting point for the reflection so it doesnt overlap and also assign a colour to a variable

PHP Code:


			
$gradient_y_startpoint = $dividerHeight;

$gdGradientColor=ImageColorAllocate($background,$gradparts[0],$gradparts[1],$gradparts[2]);

Now we need to make an exact copy of the large image for use in the reflect and copy the parts we need (the bottom) then add it to the blank background.

PHP Code:


			
$newImage = imagecreatetruecolor($imgName_w, $imgName_h);

for ($x = 0; $x < $imgName_w; $x++) {



    for ($y = 0; $y < $imgName_h; $y++)

    {

    imagecopy($newImage, $imgImport, $x, $imgName_h - $y - 1, $x, $y, 1, 1);

    }

}

// Add it to the blank background image

imagecopymerge ($background, $newImage, 0, 0, 0, 0, $imgName_w, $imgName_h, 100);

Now we want to create the reflection.

PHP Code:


			


//create from a the image so we can use fade out.

$gradient_line = imagecreatetruecolor($imgName_w, 1);



// Next we draw a GD line into our gradient_line

imageline ($gradient_line, 0, 0, $imgName_w, 0, $gdGradientColor);





$i = 0;

$transparency = 30; //from 0 - 100



    while ($i < $gradientHeight) //create line by line changing as we go

    {

        imagecopymerge ($background, $gradient_line, 0,$gradient_y_startpoint, 0, 0, $imgName_w, 1, $transparency);

        

        ++$i;

        ++$gradient_y_startpoint;

                

                if ($transparency == 100) {

                

                    $transparency = 100;

                

                }

                else 

                {

                             // this will determing the height of the

                                     //reflection. The higher the number, the smaller the reflection. 

                                     //1 being the lowest(highest reflection)

                    $transparency = $transparency + 1; 



                }

        

    }

Now we can set a header type for image and create that divider line that will be under the big image.

PHP Code:


			
header("Content-type: image/jpeg");



// Set the thickness of the line we're about to draw

imagesetthickness ($background, $dividerHeight);



// Draw the line

imageline ($background, 0, 0, $imgName_w, 0, $gdGradientColor);

Now it is a matter of displaying the image and clearing some images from the memory to save some space.

PHP Code:


			
imagejpeg($background, '', 100); //100 being the quality of image 100 Max(Best)

imagedestroy($background);

imagedestroy(gradient_line);

imagedestroy(newImage);

Usage

In a new file. Place the full size image you want to reflect on the page and under that image, place the following code.

PHP Code:


			
<img src=wetfloor.php?src=linktoimage.jpg>

This will then place the reflection of the image under it. wetfloor.php is what i called it, but you can call it what you want.

ReSpawN · 12-12-2007, 09:39 AM

Awesome! This was one of THE tutorials I have been waiting for!

Thanks mate!

Rendair · 12-12-2007, 09:45 AM

Your welcome

ReSpawN · 12-12-2007, 10:35 AM

Next to this, is there also a way to modify is the was Techzine did it? Like giving the image a gradient (wet floor) effect in the same image? You've got 2 images right now with a small white line.

Wildhoney · 12-12-2007, 10:43 AM

Any chance you can put up a before and after image?

Save me copying down all the code. Apart from the absence of an after image though, it reads very well! Very useful!

ReSpawN · 12-12-2007, 10:45 AM

Indeed it does. I am getting an error at the moment. Simply no image is showing up. I named the file image.php and the file that I am echo'ing it in pic.php.

Doesn't seem to be working, or I miscopied the code.

My current script:

PHP Code:


			
$imgName = $_GET[src];
$size = getimagesize("$imgName");  

$imgImport = imagecreatefromjpeg($imgName);


$imgName_w = $size[0];
$imgName_h = $size[1];


$gradientHeight = 100;  

// Create new blank image with sizes.
$background = imagecreatetruecolor($imgName_w, $gradientHeight);  

$gradientColor = "255 255 255"; //White
$gradparts = explode(" ",$gradientColor); // get the parts of the  colour (RRR,GGG,BBB)
$dividerHeight = 1;  

$gradient_y_startpoint = $dividerHeight;
$gdGradientColor=ImageColorAllocate($background,$gradparts[0],$gradparts[1],$gradparts[2]); 

$newImage = imagecreatetruecolor($imgName_w, $imgName_h);
for ($x = 0; $x < $imgName_w; $x++) {

    for ($y = 0; $y < $imgName_h; $y++)
    {
    imagecopy($newImage, $imgImport, $x, $imgName_h - $y - 1, $x, $y, 1, 1);
    }
}
// Add it to the blank background image
imagecopymerge ($background, $newImage, 0, 0, 0, 0, $imgName_w, $imgName_h, 100); 

//create from a the image so we can use fade out.
$gradient_line = imagecreatetruecolor($imgName_w, 1);

// Next we draw a GD line into our gradient_line
imageline ($gradient_line, 0, 0, $imgName_w, 0, $gdGradientColor);


$i = 0;
$transparency = 30; //from 0 - 100

    while ($i < $gradientHeight) //create line by line changing as we go
    {
        imagecopymerge ($background, $gradient_line, 0,$gradient_y_startpoint, 0, 0, $imgName_w, 1, $transparency);
        
        ++$i;
        ++$gradient_y_startpoint;
                
                if ($transparency == 100) {
                
                    $transparency = 100;
                
                }
                else 
                {
                             // this will determing the height of the
                                     //reflection. The higher the number, the smaller the reflection. 
                                     //1 being the lowest(highest reflection)
                    $transparency = $transparency + 1; 

                }
        
    } 

header("Content-type: image/jpeg");

// Set the thickness of the line we're about to draw
imagesetthickness ($background, $dividerHeight);

// Draw the line
imageline ($background, 0, 0, $imgName_w, 0, $gdGradientColor);  

imagejpeg($background, '', 100); //100 being the quality of image 100 Max(Best)
imagedestroy($background);
imagedestroy(gradient_line);
imagedestroy(newImage);

Found it, you need to work in $_GET[src] instead of $src since you are calling it from an other file. :)

Wildhoney · 12-12-2007, 10:57 AM

Post an after image, Respawn!

ReSpawN · 12-12-2007, 11:15 AM

Will do Honey!

My Code:
image.php

PHP Code:


			
<?php

$imgName = $_GET[src];
$size = getimagesize("$imgName");  

$imgImport = imagecreatefromjpeg($imgName);

$imgName_w = $size[0];
$imgName_h = $size[1];

$gradientHeight = 100;  

// Create new blank image with sizes.
$background = imagecreatetruecolor($imgName_w, $gradientHeight);  

$gradientColor = "255 255 255"; //White
$gradparts = explode(" ",$gradientColor); // get the parts of the  colour (RRR,GGG,BBB)
$dividerHeight = 1;  

$gradient_y_startpoint = $dividerHeight;
$gdGradientColor=ImageColorAllocate($background,$gradparts[0],$gradparts[1],$gradparts[2]); 

$newImage = imagecreatetruecolor($imgName_w, $imgName_h);
for ($x = 0; $x < $imgName_w; $x++) {

    for ($y = 0; $y < $imgName_h; $y++)
    {
    imagecopy($newImage, $imgImport, $x, $imgName_h - $y - 1, $x, $y, 1, 1);
    }
}
// Add it to the blank background image
imagecopymerge ($background, $newImage, 0, 0, 0, 0, $imgName_w, $imgName_h, 100); 

//create from a the image so we can use fade out.
$gradient_line = imagecreatetruecolor($imgName_w, 1);

// Next we draw a GD line into our gradient_line
imageline ($gradient_line, 0, 0, $imgName_w, 0, $gdGradientColor);

$i = 0;
$transparency = 30; //from 0 - 100

    while ($i < $gradientHeight) //create line by line changing as we go
    {
        imagecopymerge ($background, $gradient_line, 0,$gradient_y_startpoint, 0, 0, $imgName_w, 1, $transparency);
        
        ++$i;
        ++$gradient_y_startpoint;
                
                if ($transparency == 100) {
                
                    $transparency = 100;
                
                }
                else 
                {
                             // this will determing the height of the
                                     //reflection. The higher the number, the smaller the reflection. 
                                     //1 being the lowest(highest reflection)
                    $transparency = $transparency + 1; 

                }
        
    } 

header("Content-type: image/jpeg");

// Set the thickness of the line we're about to draw
imagesetthickness ($background, $dividerHeight);

// Draw the line - me do not likey the liney
//imageline ($background, 0, 0, $imgName_w, 0, $gdGradientColor);

imagejpeg($background, '', 100); //100 being the quality of image 100 Max(Best)
imagedestroy($background);
imagedestroy(gradient_line);
imagedestroy(newImage);  

?>

pic.php

PHP Code:


			
<style>body { background-color: white; }</style>

<?php

// Image name, handy for doubleclick-paste.
$image = 'wii_zelda';

// Refix the .jpg extention
$image = $image.'.jpg';

// Echo it out.
echo '<img src="'.$image.'"><br /><img src="image.php?src='.$image.'">';

?>

Original Source:

Result:

Rendair · 12-12-2007, 12:59 PM

Yeah at the moment it creates a new image, but i am working on a class that will create it as one image

hopefully.

Wildhoney · 12-12-2007, 01:12 PM

Oh now that is smart! Even got the gradient there which is impressive stuff.

ReSpawN · 12-13-2007, 08:43 AM

It really is! What would be even more awesome, is to intergrade it like this.

1. You upload an image, let's stay, a wallpaper.
2. The script creates a thumb to display on the frontpage.
3. Your script, gives it the extra designerstyle edge by creating a wet-floor effect and creating a seperate image.
- You've got 3 images right now. The uploaded original, the thumb and your version.
4. Your script saves the file OVER (overwrite) the thumb and finito! You've got a thumbnail with a wet-floor effect.

Would be a nice project huh? If you need any help, I'm all yours (for what I CAN do).

Rendair · 12-13-2007, 10:57 AM

Yes indeed that sounds like a good project and i am up for giving it a shot. If you have any MSN or something like that let me know, so you are able to help that way.

ReSpawN · 12-13-2007, 12:07 PM

Yeah I do.

Feel free to add me @ markernstproductions@gmail.com.
Noticed that you're UK, so our time diffirence is only 1 hour I believe (GTM+1 here).

Tell me what to do and let's get crackin'. I'm new to the whole image thing in PHP, so that's going to be a challenge. BUT I am up for it!

Rendair · 12-13-2007, 07:51 PM

If you check out my website now i have updated it using the image reflection as it just gave me such a great idea lol.

The images at the top will change everytime, sometimes displays the same image, but still working on that lol.

http://www.dalemooney.com/

ReSpawN · 12-13-2007, 10:20 PM

Ah very nice Dale, looks very professional. I like it a lot.

cybeerboy · 01-22-2008, 09:27 AM

Thanks! I tried it already

I love it.