Give an image a transparent background in C#

[transparent]

The Bitmap class’s MakeTransparent method changes all of the pixels with a given color to the transparent color A = 0, R = 0, G = 0, B = 0. When the program starts, the following code makes the background transparent for the two images stored in the program’s Smile and Frown resources.

// The images.
private Bitmap SmileBitmap, FrownBitmap;

// Make the images' backgrounds transparent.
private void Form1_Load(object sender, EventArgs e)
{
    SmileBitmap = Properties.Resources.Smile;
    SmileBitmap.MakeTransparent(SmileBitmap.GetPixel(0, 0));

    FrownBitmap = Properties.Resources.Frown;
    FrownBitmap.MakeTransparent(FrownBitmap.GetPixel(0, 0));
}

The code saves the Smile resource in a Bitmap variable. It then uses the Bitmap object’s MakeTransparent method to make all of its pixels that match the color of the pixel in the upper left corner transparent. The code then repeats those steps for the Frown image.

The following Paint event handler displays the two images.

// Draw the two images overlapping.
private void Form1_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.DrawImage(FrownBitmap, 30, 30);
    e.Graphics.DrawImage(SmileBitmap, 95, 85);
}

This code simply draws the two images overlapping so you can see that they have transparent backgrounds.


Download Example   Follow me on Twitter   RSS feed   Donate




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

7 Responses to Give an image a transparent background in C#

  1. kaliprasad m says:

    Hello,

    Is there a way make the gray transparent to White ?

    • RodStephens says:

      I’m not sure what you’re asking. In this example, the background is transparent. It is drawn over a gray background, so that is what is showing through. if you display it on a white background, then the white would show through.

      If you’re asking whether you can make the white pixels in the image transparent, simply call the bitmap’s MakeTransparent method and pass it the color Color.White.

  2. Nick says:

    Rod, first I want to thank you for giving us so much stuff for free. You’re amazing… I think this is the best site we can learn C#.

    This question is for drawing in pictureBox Paint event not for png image with is surrounded by transparent pixels.

    The MakeTransparent method works well if the drawing has set e.Graphics.SmoothingMode = SmoothingMode.None but for SmoothingMode.AntiAlias the white (or any other color) pixels on the background Form will be blended with the color of the Pen.
    The solution would be to create a transparent background first and then to draw. How can we do this because the PictureBox control inherits the Form color.
    How can we make a drawing surface like glass before we get drawn?

    Here is the image to understand what is the issue:

    • RodStephens says:

      Yes, this is a problem and you’ve pinpointed it nicely. I think you have three main options.

      First, you can make the original background that you turn transparent match the background that you draw the image on top of. Either change the original background or change the new background. Of course that will only work if you have control of either the original background or the final background.

      Second, you can write code to hunt down all of the anti-aliased pixels and adjust them. For example, suppose as in this example you drew a black line over a white background. Then the anti-aliased pixels are a mix of white and black. Find them and convert the whiteness into transparency. For example, if a pixel is 50% white (so its red, green, and blue components are 128), then change it so it is 100% black (RGB = 0, 0, 0) and alpha is 128 so it is half transparent. That should work as long as the non-anti-aliased pixels are not shades of gray. Unfortunately it requires you to examine every pixel and that will be slow.

      The best solution is to draw the original image with a transparent background. Before you start drawing, clear the image with the Transparent color. Then draw on it. In that case, the anti-aliased pixels will be semi-transparent (like the result of the second option). Of course, this only works if you have control over the original drawing. In other words, if you draw it. If you’re getting it from somewhere else and it was already drawn with a non-transparent background, then this won’t work.

  3. Nick says:

    Thank you for your answer but it seems that none of your indications works.

    Many colors have a certain amount of white in their composition. In my example I used black, but for other colors it is very difficult to detect only the edges and replace the white with its transparent equivalent of pen color.

    Also, if I clear the image with the Transparent color, behind the image is the color of the Form that makes things go wrong.

    • RodStephens says:

      Take a look at this example.

      Use transparency when drawing with anti-aliasing in C#

      The form’s color should not show through if you set the PictureBox control's BackColor property or clear the background in the Paint event handler.

      I'm still not sure how you're drawing. Are you drawing the original image? Or did you get it somewhere?

      If you got it somewhere so you don't have control over it and it has lots of anti-aliased colors, then I don't think there is an easy solution for you. You could convert every pixel within about 3 pixels of a transparent pixel. That would be hard and erode your image so it would become smaller, but it might provide a slightly better result. Overall, however, you may just be stuck without a good solution.

  4. Nick says:

    Thank you Rod.
    I use your code from “Let the user draw polygons, move them, and add points to them in C#”.
    Finally I save the drawing as .png image and I load in Paint.Net editor.

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.