Overlay images in C#

[overlay transparent images]

This example shows how to overlay images with transparent backgrounds on a background picture. The following two examples make small files that you can use as overlay images to annotate larger images.

The images have transparent backgrounds but MS Paint doesn’t understand transparent backgrounds so if you try to use them to annotate images the transparent portions appear white or some other color. This example lets you overlay images on a background image.

Use the File menu’s Open command to open a background image.

Then use the File menu’s Overlay command to open overlay images that have a transparent background. The mouse cursor changes to a cross hair and you can move the overlay images around. When an image is where you want it, click to drop the image there.

You can repeat these steps to add several overlay images to the background image. When you’re finished, use the File menu’s Save command to save the result into a file.

The code that opens the background image is reasonably straightforward. Download the example to see how it works.

The following code shows how the program opens overlay images.

// The overlay image.
private Bitmap OverlayBitmap = null;

// Load the overlay image.
private void mnuFileOverlay_Click(object sender, EventArgs e)
    if (ofdFile.ShowDialog() == DialogResult.OK)
            // Open the file.
            OverlayBitmap = new Bitmap(ofdFile.FileName);
            picImage.Cursor = Cursors.Cross;

            // Display the combined image.
        catch (Exception ex)
            MessageBox.Show("Error opening file.\n" + ex.Message,
                "Open Error", MessageBoxButtons.OK,

The code displays the OpenFileDialog named ofdFile. If the user selects a file and clicks OK, the program loads the file into a Bitmap. It changes the cursor to a cross hair so you know that you can move the image and then calls the following ShowCombinedImage method to display the background image with the new overlay.

// The current combined image.
private Bitmap CombinedBitmap = null;

// Display the combined image.
private void ShowCombinedImage()
    // If there's no background image, do nothing.
    if (BackgroundBitmap == null) return;

    // Copy the background.
    CombinedBitmap = new Bitmap(BackgroundBitmap);

    // Add the overlay.
    if (OverlayBitmap != null)
        using (Graphics gr = Graphics.FromImage(CombinedBitmap))
            gr.DrawImage(OverlayBitmap, OverlayLocation);

    // Display the result.
    picImage.Image = CombinedBitmap;

The ShowCombinedImage method makes a CombinedBitmap bitmap by copying the background bitmap. If the OverlayBitmap isn’t null, the user is in the process of adding a new overlay. In that case the program makes a Graphics object associated with the CombinedBitmap and uses it to draw the overlay at its current position OverlayLocation.

When you move the mouse, the following event handler keeps OverlayPosition up to date so the ShowCombinedImage method knows where to draw the overlay.

// Drag the overlay image.
private void picImage_MouseMove(object sender, MouseEventArgs e)
    if (OverlayBitmap == null) return;
    OverlayLocation = new Point(
        e.X - OverlayBitmap.Width / 2,
        e.Y - OverlayBitmap.Height / 2);

This code simply sets OverlayLocation to center the overlay image on the mouse’s current position.

Finally when you click the mouse the following code sets the overlay in its current position.

// Finish dragging the overlay image.
private void picImage_MouseClick(object sender, MouseEventArgs e)
    if (OverlayBitmap == null) return;
    OverlayBitmap = null;
    picImage.Cursor = Cursors.Default;

    // Make the overlay permanent.
    BackgroundBitmap = CombinedBitmap;

This code makes the current image including the overlay become the new background image so you can save it into a file or add more overlays.

For additional details, download the example and look at the code.

Note: If you look very closely at the overlays in the picture shown here, you’ll see that they blend smoothly into whatever is behind them in the background image. The overlay files created by the previous examples were built by drawing circles and text on top of a transparent background. The GDI+ drawing methods use anti-aliasing to make the edges of the circles smooth. Basically that means that they blend smoothly into the transparent background. Another way to think of this is that they gradually become transparent as you move away from the circles. When you place the overlay on a background image, the overlay image also gradually becomes transparent toward its edges allowing the background image to show through a bit around the edges. The result gives a very nice transition.

Download Example   Follow me on Twitter   RSS feed   Donate

This entry was posted in books, drawing, graphics, image processing and tagged , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.