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.