Image Alpha Blending

<< Back to the EasyImage Toolkit page

Tutorial - Alpha Blending Two Images

What you will learn

This tutorial shows:

  • how you can alpha-blend two images together, using an alpha-blending value to determine the amount of blending that should be done.
  • Note: the program uses resources to store two images. Y

In the above picture,

  • the image is an alpha blended version of two source images

Download

While we recommend you create this program from scratch, you can also download the source and executables.

Source and Executables of this and other examples: EasyImagesExamples.zip
  • Unzip all files into a single folder.
  • Try the executable; a shortcut is in the top-level directory, or look in the debug directory
  • You will need a web camera attached to your computer.

Step 1. Preconditions

Including EasyImages in your new Visual Studio 2005 C# project. This was described in Minimal Camera Example. Make sure to include the using EasyImages; line in your project.

Step 2. Creating GUI controls

Add the following GUI controls to your form window. Thei locations and purpose should be obvious if you check the image at the top of this page.

  • 1 PictureBox ''will display the alpha blended image
    • Name = pbImage
    • Size = 320,240 (the Width and Height of the frame we will put in it)
  • 1 Labels
    • Name = lblAlphaLevel
    • Text = Alpha Blending Level:
  • TrackBar ''interactively change the alpha blending level
    • Name = tbAlphaBlend
    • Minimum = 0
    • Maximum = 100

Step 3. Include 2 images as Resources

Two images should be included as resources, named image1 and image2. It is beyond the scope of this tutorial to teach you how to use resources (this is standard in VS 2005), but if you are unsure, just read two images of the same size from files.

Step 4. Writing the program

The complete program is listed below.

using System;
using System.Drawing;
using System.Windows.Forms;
using System.Resources;
using EasyImages;
namespace ImageAlphaBlending
{
  public partial class Form1 : Form
  {
    //Get these two images (they are saved as resources as part of this project)
    Image image1 = Images.Picture1;
    Image image2 = Images.Picture2;

    public Form1()
    {
      InitializeComponent();
    }

    // Show the images when the form is loaded
    private void Form1_Load(object sender, EventArgs e)
    {
      ShowImage();
    }

    // Show the images when the alpha blending level is reset
    private void tbAlphaBlend_Scroll(object sender, EventArgs e)
    {
      ShowImage();
    }

    // Alpha-blend the two images (use the alpha level in the trackbar)
    // Then display it as well as the alpha value
    private void ShowImage()
    {
      pbImage.Image = EasyImages.ImageGenerator.AlphaBlend(image2, image1, tbAlphaBlend.Value / 100.0f);
      lblAlphaLevel.Text = "Alpha Blending Level: " + tbAlphaBlend.Value.ToString ();
    }
  }
}

Explanation

  • Two images are loaded from resources. I saved them by creating a new resource file called Images.resx, then double-clicking on that resource and added the images to it. This is a standard way to use Resources in Visual Studio... you could always change this to load images from files.
  • Form1_load (the form load event handler) and tbAlphaBlend_Scroll (the trackbar event handler) just show the image
  • ShowImage alpha blends the two images together use the alpha level in the trackbar, and then displays its the alpha value in a label