11,429,382 members (68,948 online)

# Image Glass Table Effect (Reflection) Using GDI+

, 28 Feb 2008 CPOL
 Rate this:
This article introduces a simple algorithm to do a glass table effect using GDI+.

## Introduction

Recently, while writing an e-commerce web application, I needed to transform the product’s images in some “professional” way, so I decided to add to each product image a well known glass effect table. Since I’m broke, I can’t afford having an artist to modify each image, so I decided to write some simple algorithm to do it automatically using GDI+.

## Using the code

To transform the image, simply use the static method of the helper, like this:

`Image newImage = ImageEffectsHelper.DrawReflection(pOriginal.Image, Color.White, 90);`

The parameters of this method are quite self-explanatory, but still, here they are:

• `Image` – It’s the original image you want to make the reflection of.
• `BackgroundColor` – The background color of the image, used to paint the reflection by using a gradient brush.
• `Reflectivity` – From 0 to 255, it’s the reflectivity of the image (gradient brush alpha).

## Example

I prepared a small example project, containing two Windows forms, so you will be able to select the image you want to process and preview the processed image.

## Algorithm

Now, the algorithm itself; it calculates the height of the new image based on the desired `Reflectivity`. After that, it creates a new graphics buffer, draws the original image on it, and on a second graphics buffer, it draws the reflected image, then flips it. At the end, it simply merges both the images and uses a gradient brush (with the given alpha and `BackgroundColor`) on it. Here’s the code:

```public static Image DrawReflection(Image _Image, Color _BackgroundColor, int _Reflectivity)
{
// Calculate the size of the new image
int height = (int)(_Image.Height + (_Image.Height * ((float)_Reflectivity / 255)));
Bitmap newImage = new Bitmap(_Image.Width, height, PixelFormat.Format24bppRgb);
newImage.SetResolution(_Image.HorizontalResolution, _Image.VerticalResolution);

using (Graphics graphics = Graphics.FromImage(newImage))
{
// Initialize main graphics buffer
graphics.Clear(_BackgroundColor);
graphics.DrawImage(_Image, new Point(0, 0));
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
Rectangle destinationRectangle = new Rectangle(0, _Image.Size.Height,
_Image.Size.Width, _Image.Size.Height);

// Prepare the reflected image
int reflectionHeight = (_Image.Height * _Reflectivity) / 255;
Image reflectedImage = new Bitmap(_Image.Width, reflectionHeight);

// Draw just the reflection on a second graphics buffer
using (Graphics gReflection = Graphics.FromImage(reflectedImage))
{
gReflection.DrawImage(_Image,
new Rectangle(0, 0, reflectedImage.Width, reflectedImage.Height),
0, _Image.Height - reflectedImage.Height, reflectedImage.Width,
reflectedImage.Height, GraphicsUnit.Pixel);
}
reflectedImage.RotateFlip(RotateFlipType.RotateNoneFlipY);
Rectangle imageRectangle =
new Rectangle(destinationRectangle.X, destinationRectangle.Y,
destinationRectangle.Width,
(destinationRectangle.Height * _Reflectivity) / 255);

// Draw the image on the original graphics
graphics.DrawImage(reflectedImage, imageRectangle);

// Finish the reflection using a gradiend brush
Color.FromArgb(255 - _Reflectivity, _BackgroundColor),
_BackgroundColor, 90, false);
graphics.FillRectangle(brush, imageRectangle);
}

return newImage;
}```

## History

• 28/02/08 – Initial release.

## Share

Chief Technology Officer Misakai Ltd.
Ireland
Roman Atachiants is the guy behind www.spike-engine.com project, a real-time, client-server networking layer (SOA, RPC) for .NET developers. Also the founder of Misakai Ltd..

He is a software engineer and scientist with extensive experience in different computer science domains, programming languages/principles/patterns & frameworks.

His main expertise consists of C# and .NET platform, game technologies, cloud, human-computer interaction, big data and artificial intelligence. He has an extensive programming knowledge and R&D expertise.

 First Prev Next
 My vote of 5 manoj kumar choubey18-Feb-12 4:20 manoj kumar choubey 18-Feb-12 4:20
 Nice Code NNTBIZ29-Jun-09 0:16 NNTBIZ 29-Jun-09 0:16
 Great Article but problem with Transparent Background f r i s c h21-Mar-09 4:19 f r i s c h 21-Mar-09 4:19
 I made a slightly improved version... DanBystrom16-Jan-09 21:57 DanBystrom 16-Jan-09 21:57
 Re: I made a slightly improved version... Biswas, Sumit17-Feb-09 20:20 Biswas, Sumit 17-Feb-09 20:20
 Re: I made a slightly improved version... Kel_18-Feb-09 2:37 Kel_ 18-Feb-09 2:37
 This is so FAKE, that doen't even look like reflection akirilov30-May-08 3:21 akirilov 30-May-08 3:21
 I gave 5 before trying the demo, but changed to 1 (or may be 2 just for the work). The whole idea is faking reflection, and it is far way from reality. (actually there is 1 case that the fake look real, but why bother with it).
 Re: This is so FAKE, that doen't even look like reflection Biswas, Sumit17-Feb-09 20:09 Biswas, Sumit 17-Feb-09 20:09
 Last Visit: 31-Dec-99 19:00     Last Update: 3-May-15 14:38 Refresh 1

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Web04 | 2.8.150428.2 | Last Updated 28 Feb 2008