GD Library: Create Image Reflections Using PHPs GD Library--tutorial.jcwcn.com

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.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

GD Library: Create Image Reflections Using PHPs GD Library

relation tutorial

Category

New

Hot