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+.

This article is more like a code snippet, for you who want do the same in your applications or websites. It’s simple, yet useful!

Using the code

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

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:

Share

About the Author

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.