Transparent

[dipique]

I have a picturebox that loads an image with a white background. I'd like to make the image have a transparent color (sort of like Bitmap.MakeTransparent()), but I can't figure out how.

Dan

[MrPolite]

I have a picturebox that loads an image with a white background. I'd like to make the image have a transparent color (sort of like Bitmap.MakeTransparent()), but I can't figure out how.

Dan

you need to use image attributes. Just copy pasting from my library without looking at it it should work. When you use Graphics.DrawImage you have the option of passing an imageAttributes object.

/// <summary>
		/// Used to enable semi-transparency in an image. Returns the ImageAttributes required
		/// to draw the image with the given transparency vlaue.
		/// </summary>
		/// <param name="transparency">Transparency value, must be between 0 and 1, with 1 being
		/// the most transparent.</param>
		/// <returns>Returns the ImageAttributes representing the new transparency.</returns>
		public static ImageAttributes GetTransparentAttributes (float transparency)
		{
			if (transparency < 0  || transparency > 1)
				throw new ArgumentOutOfRangeException ("Value must be between 0 and 1.");

			ColorMatrix cMatrix = new ColorMatrix ( 
				new float[][]  { 
								   new float[] {1, 0, 0, 0, 0},
								   new float[] {0, 1, 0, 0, 0},
								   new float[] {0, 0, 1, 0, 0},
								   new float[] {0, 0, 0, transparency, 0},
								   new float[] {0, 0, 0, 0, 1}});

			ImageAttributes imageAttrib = new ImageAttributes();
			imageAttrib.SetColorMatrix(cMatrix);
			return imageAttrib;
		}

[dipique]

I'm not sure if I would know how to implement that. I have a picturebox, which means that the drawimage event would occur... when? And all those attributes, the source rectangles and such... God only knows what they are. What is the color matrix? Why are their six floats, and why does the fifth one have a transparent? How do I specify the color that I want to be transparent?

Dan

[MrPolite]

ummmm if you want one specific color to be transparent (invisible) then use bitmap.makeTransparent....
if you want one certain color value to have a specified transparency (alpha value), then you'd have to modify each pixel one by one, and it's a bit more complicated. The code above lets you set the transparency of an image as a whole. For example if you call the function with a transparency value of 0.5 then it means that the image will be drawn with 50% transparency (half see-through)
The 4,4 element in the color matrix specifies the "alpha factor"... meaning that the alpha values of all pixels in your image will be multipled by that number (ie, all alpha values will be multiplied by 0.5). I'll include a description of all matrix elements at the end of this post....



do this as an example. Create a new project. Add a picturebox and set its size to 200x200. Put a button on and use this:

//using System.Drawing.Imaging;
		private void button1_Click(object sender, System.EventArgs e)
		{
			string path2=@"c:\windows\Soap Bubbles.bmp",
				   path1=@"c:\windows\Zapotec.bmp";

			pictureBox1.Image = new Bitmap (200,200);
			Graphics gr = Graphics.FromImage (pictureBox1.Image);

			Bitmap bmp = new Bitmap(path1);
			// Draw the bitmap normally
			gr.DrawImage  (bmp,0,0);

			bmp.Dispose();
			bmp = new Bitmap (path2);
            ImageAttributes attrib = GetTransparentAttributes (0.3f);
			// Draw with 30% transparency, at position (50,50)
			gr.DrawImage (bmp, new Rectangle (50,50,bmp.Width, bmp.Height),
							0,0,bmp.Width, bmp.Height, GraphicsUnit.Pixel, attrib);
			bmp.Dispose();
			gr.Dispose();

		}


		/// Used to enable semi-transparency in an image. Returns the ImageAttributes required
		/// to draw the image with the given transparency vlaue.
		/// </summary>
		/// <param name="transparency">Transparency value, must be between 0 and 1, with 1 being
		/// the most transparent.</param>
		/// <returns>Returns the ImageAttributes representing the new transparency.</returns>
		public static ImageAttributes GetTransparentAttributes (float transparency)
		{
			if (transparency < 0  || transparency > 1)
				throw new ArgumentOutOfRangeException ("Value must be between 0 and 1.");

			ColorMatrix cMatrix = new ColorMatrix ( 
				new float[][]  { 
								   new float[] {1, 0, 0, 0, 0},
								   new float[] {0, 1, 0, 0, 0},
								   new float[] {0, 0, 1, 0, 0},
								   new float[] {0, 0, 0, transparency, 0},
								   new float[] {0, 0, 0, 0, 1}});

			ImageAttributes imageAttrib = new ImageAttributes();
			imageAttrib.SetColorMatrix(cMatrix);
			return imageAttrib;
		}
	}

and here's an explanation of the matrix elements I had written before, for myself ofcourse.... It shows it as an example:

/*
 * ColorMatrix Explanation:
 *   1   0   0  0  0 
 *   0   1   0  0  0
 *   0   0   1  0  0
 *   0   0   0  1  0
 * .37 .15 .07  0  1
 * 
 * r = (r*1) + (g*0) + (b*0) + (a*0) + (1*.37) = r + .37
 * g = (r*0) + (g*1) + (b*0) + (a*0) + (1*.15) = g + .15
 * b = (r*0) + (g*0) + (b*1) + (a*0) + (1*.07) = b + .07
 * a = (r*0) + (g*0) + (b*0) + (a*1) + (1*0)   = a
 * 
 * Max value for each r,g,b,a value is 1 which means 255. The 5th column is useless except for the last row (5,5).
 * Last row is for translation
 * Another explanation:
 * RED			rR gR bR aR 0
 * GREEN		rG gG bG aG 0
 * BLUE			rB gB bB aB 0
 * ALPHA		rA gA bA aA 0
 * TRANSFORM    fR fG fB fA F
 * 
 * This will convert (R, G, B, A) to:
 * R = (R*rR) + (G*gR) + (B*bR) + (A*aR) +   (F*fR)
 * G = (R*rG) + (G*gG) + (B*bG) + (A*aG) +   (F*fG)
 * B = (R*rB) + (G*gB) + (B*bB) + (A*aB) +   (F*fB)
 * A = (R*rA) + (G*gA) + (B*bA) + (A*aA) +   (F*fB)
 */

[dipique]

I think you mistook the intended effect. I have an image with a white background. I want the white part to be completely transparent.

Dan

[dipique]

This is something I tried but didn't work; however, it might give you a better idea of my intent:

//Save image to be edited to file
pbRobot.Image.Save(@"z:\b.bmp");
//Load image to bitmap
Bitmap b = new Bitmap(@"z:\b.bmp");
//for every column
for (int x = 0; x < b.Width; x++)
//of every row
	for (int y = 0; x < b.Height; y++)
//See if the pixel is white
		if (b.GetPixel(x,y).ToKnownColor() == KnownColor.White)
//if it is, make it transparent
			b.SetPixel(x,y, Color.Transparent);
//save it back to the file
b.Save(@"z:\b.bmp");
//load it to the picture box
pbRobot.Image = Image.FromFile(@"z:\b.bmp");

Dan

[MrPolite]

bleh all that effort and not what you';re looking for? shame on you

I told you, if you want to make a color transparent use Bitmap.MakeTransparent(). DO NOT use setPixel and GetPixel. If yuo want to know the reason, its because each time you want to read data from the bitmap you need to lock the bitmap in memory. So each time you call getpixel and setpixel, the bitmap is being "locked" and "unlocked" in memory... and you repeat this locking and unlocking for the total number of pixels that you have... slows down your app A LOT. You'd need to use Bitmap.LockBits() and unlockBits() (I think thats the name of the function) and then use pointers to modify the pixels. I could help you do that, but I don't think it's necessary. You can just make a certain color transparent by calling Bitmap.MakeTransparent.


IF you want the SAVED image to have a transparent color, then you are doing a bunch of things wrong first of all BITMAPS do NOT support transparency, so you'd have to save the image as PNG (you could do GIF also, but I wouldnt recommend it because the .NET framework loses the color table for a GIF image when you save it, and your image will look pretty ugly and low quality). Let me know whether you're trying to save a semi-transparent image, or to just draw it on screen, and I'll see what I can do... I wont have time to work on this until tomorrow.

[brad jones]

In Visual Studio 2005 there is a transparent property that can be used on some controls/etc. setting this to true and picking a color allows you to incorporate transparency. There is an MSDN even that talks specifically about this (for creating weird shaped forms). In pre-beta 2 versions I didn't get it working in C#, but did in VB.NET. If I get a chance, I'll see if I can dig out more information on this.

Brad!

[dipique]

The Get/Set pixel code was an easy-to-follow demonstration of what I want done. Here's what I want done in pseudo-code:

PictureBox.Image.MakeTransparent(Color.White);

Unfortunately, only bitmaps have the MakeTransparent method. The saving and loading was only to translate the bitmap to the image, which I don't know how to do either. The idea is that the picturebox will become transparent in the areas where that color is.

Dan

[dipique]

Also tried this, just for fun:

Bitmap B = new Bitmap(pbRobot.Image, pbRobot.Image.Size);
int a, r, g, b; //rgb values
Imaging.BitmapData bmData = B.LockBits(new Rectangle(new Point(0,0), B.Size),
	Imaging.ImageLockMode.ReadWrite, Imaging.PixelFormat.DontCare);
for (int x = 0; x < B.Width; x++)
	for (int y = 0; x < B.Height; y++)
	{
                Color pixelColor = B.GetPixel(x,y);
		r = pixelColor.R;
		b = pixelColor.B;
		g = pixelColor.G;
                a = ((r + b + g) == 765) ? 255:0; //make alpha 255 if color is white
		Color newColor = Color.FromArgb(a, r, g, b);
                B.SetPixel(x,y, newColor);					
	}
B.UnlockBits(bmData);
pbRobot.Image = (Image)B;

Dan

[MrPolite]

umm lock and unlock bits isnt quite like that ummm I'm still not sure as to whether you want the actual picturebox to be transparent, or if you want to save the image as a transparent image. If you want the control to be transparent then I dont think you can really do it, or at least not easily.
if you already have a bitmap, say called bmp then you can do this:

bmp.MakeTransparent (Color.Red); // or whatever other color
bmp.SaveImage (@"C:\test.png", ImageFormat.Png); // Save as PNG to keep the transparency

[dipique]

Yes, I wanted the actual picturebox to be transparent. Which, apparently, is close to impossible. *sigh*

Dan