12,395,871 members (66,038 online)
alternative version

55.8K views
68 bookmarked
Posted

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, Ph.D. is the architect behind emitter.io service, a real-time, low-latency publish/subscribe service for IoT, Gaming. 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.

You may also be interested in...

 First Prev Next
 My vote of 5 manoj kumar choubey18-Feb-12 3:20 manoj kumar choubey 18-Feb-12 3:20
 Nice Code NNTBIZ28-Jun-09 23:16 NNTBIZ 28-Jun-09 23:16
 Great Article but problem with Transparent Background f r i s c h21-Mar-09 3:19 f r i s c h 21-Mar-09 3:19
 I made a slightly improved version... DanBystrom16-Jan-09 20:57 DanBystrom 16-Jan-09 20:57
 Re: I made a slightly improved version... Biswas, Sumit17-Feb-09 19:20 Biswas, Sumit 17-Feb-09 19:20
 Re: I made a slightly improved version... Kel_18-Feb-09 1:37 Kel_ 18-Feb-09 1:37
 This is so FAKE, that doen't even look like reflection akirilov30-May-08 2:21 akirilov 30-May-08 2:21
 Re: This is so FAKE, that doen't even look like reflection Biswas, Sumit17-Feb-09 19:09 Biswas, Sumit 17-Feb-09 19:09
 Last Visit: 31-Dec-99 18:00     Last Update: 24-Jul-16 2:11 Refresh 1