Transparency, ASP.NET, and GDI+

[Nathan Sokalski]

I am trying to create graphics with GDI+ that include transparency. However,
the transparency never seems to show up, even though my colors have an alpha
value of 0. How can I generate a graphic that is completely transparent in
certain areas (so that the web page background shows through)? I save my
graphics as gif files. I would appreciate, if possible, a simple example so
that I can see the code. Thanks.

 

[Kevin Spencer]

The only graphics formats that have transparency in HTML are GIF and PNG.
What format are you using?

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Everybody picks their nose,
But some people are better at hiding it.

 

[Nathan Sokalski]

Like I said in my original message, I am using GIF. The line that I use to
save my image is as follows (testbitmap is the name of my
System.Drawing.Bitmap object):

testbitmap.Save(Server.MapPath("GDItest.gif"), Imaging.ImageFormat.Gif)

 

[Lloyd Dupont]

I think IE don't support transparency.
At least I can say for sure it doesn't support PNG transparency.
It is an issue that should be fixed with IE 7 or could be fixd with Firefox!

 

[Nathan Sokalski]

I know for sure that IE correctly supports transparency in GIF files because
I have made transparent GIF files using Adobe Photoshop in the past that
worked correctly in IE. What the problem appears to be to me, although I
could be wrong, is that when a new System.Drawing.Bitmap is created in
ASP.NET it automatically gives it a background with an Alpha value of 255
(completely opaque). Because of this, whenever anything is drawn on the
bitmap, it is drawn on top of the opaque background. This means that
anything with an Alpha value of 0 (completely transparent) is not visible.
If this is the case, I think the only solution would be to "erase"
previously drawn pixels (which I do not know of a way to do), including the
background or to have the initial background color have an Alpha value of 0.
This is only a theory, so I could be wrong. A workaround that I have come up
with (but it requires the developer to create an extra file) is to use an
existing image file that is completely transparent in the
System.Drawing.Bitmap constructor. Let me know if you come up with any
ideas. Thanks.

 

[Lloyd Dupont]

mmhh...
never really investigate this matter, but I would have guess that maybe you
could do:

Bitmap bmp = new Bitmap(width, height);
bmp.MakeTransparent();

or with
bmp.LockBit() you could directly access the bitmap's color pointer
as explained here:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dncscol/html/csharp11152001.asp

 

[Kevin Spencer]

Not correct. While IE doesn't support PNG transparency, it has lawys
supported GIF transparency.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Everybody picks their nose,
But some people are better at hiding it.

 

[Kevin Spencer]

Hi Nathan,

Sorry, I missed the "gif" reference in your OP.

A GIF image palette can define one color as transparent. I'm not sure how
you're defining the transparent color in your palette, but the following
Microsoft KB article explains how to do it. Note that the article is not
specifically about making a transparent gif, but it covers creating a
palette with a single transparent color, which is encoded as the transparent
color for the GIF:

http://support.microsoft.com/default.aspx?scid=kb;EN-US;Q319061

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Everybody picks their nose,
But some people are better at hiding it.

 

[Nathan Sokalski]

The MakeTransparent() didn't seem to have any affect, and I'm not sure why
(maybe the example wasn't quite clear enough) but the link you gave didn't
seem very clear to me. I think what I really need is a just a basic example
that just draws a simple shape or two and then adds a transparent area.
Thanks.

 

[Nathan Sokalski]

I looked at the article you mentioned, and it definitely cleared up for me
why I was never getting any transparency, but I am still having trouble
figuring out how to fix the problem. I think what I really need is just a
basic example that just draws a simple shape or two and then adds a
transparent area. (Preferably in VB.NET, but I can usually get enough from
C# that it helps enough to solve my problem) Thanks.

 

[Kevin Spencer]

Hi Nathan,

Okay, basically you have a palette to work with. The article tells you how
to define the colors in the palette. Also note that the palette can
certainly have LESS than 256 colors if you don't need them all. So, assuming
you're drawing with GDI+, you just clear the bitmap to the transparent
color, and draw with the others. All of the pixels that have the transparent
color will be transparent. It doesn't matter what the transparent color is;
it will be defined as "the transparent color" in the palette.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Expect the unaccepted.

 

[Lloyd Dupont]

oops.. GIF!
what about
Bitmap.MakeTransparent (Color)
where Color is your background which might be white per default, I believe

 

[Nathan Sokalski]

I am having trouble defining the colors in the palette. The first method I
tried gave me the error Object reference not set to an instance of an
object. (Which didn't surprise me, but it would not let me use the keyword
New when declaring the Imaging.ColorPalette). Here is that code:

Dim transbitmap As New Bitmap(400, 400)
Dim transgraphics As Graphics = Graphics.FromImage(transbitmap)
Dim transpen As New Pen(Color.FromArgb(255, 0, 255, 0), 20)
Dim transbrush As New SolidBrush(Color.FromArgb(255, 255, 0, 0))
Dim transpalette As Imaging.ColorPalette
transpalette.Entries(0) = Color.FromArgb(0, 255, 255, 255)
transpalette.Entries(1) = Color.FromArgb(255, 0, 255, 0)
transpalette.Entries(2) = Color.FromArgb(255, 255, 0, 0)

transgraphics.Clear(Color.FromArgb(0, 255, 255, 255))
transbitmap.Palette = transpalette
transgraphics.FillRectangle(transbrush, 100, 100, 200, 200)
transgraphics.DrawRectangle(transpen, 50, 50, 150, 150)
transbitmap.Save(Server.MapPath("GDItest.gif"), Imaging.ImageFormat.Gif)


The second method I tried gave me the error Index was outside the bounds of
the array. Here is that code:

Dim transbitmap As New Bitmap(400, 400)
Dim transgraphics As Graphics = Graphics.FromImage(transbitmap)
Dim transpen As New Pen(Color.FromArgb(255, 0, 255, 0), 20)
Dim transbrush As New SolidBrush(Color.FromArgb(255, 255, 0, 0))
transbitmap.Palette.Entries(0) = Color.FromArgb(0, 255, 255, 255)
transbitmap.Palette.Entries(1) = Color.FromArgb(255, 0, 255, 0)
transbitmap.Palette.Entries(2) = Color.FromArgb(255, 255, 0, 0)

transgraphics.Clear(Color.FromArgb(0, 255, 255, 255))
transgraphics.FillRectangle(transbrush, 100, 100, 200, 200)
transgraphics.DrawRectangle(transpen, 50, 50, 150, 150)
transbitmap.Save(Server.MapPath("GDItest.gif"), Imaging.ImageFormat.Gif)


What I expected from the code above was to create a GIF file with a red
filled rectangle, a green unfilled rectangle, and a transparent background.
If I remove the lines where I attempt to define the palette, this is what I
got except instead of a transparent background I ended up with a black
background. What am I supposed to do to create/edit the palette? The article
you mentioned took the palette from another Bitmap, which is not something I
am planning to do. Thanks.

 

[Nathan Sokalski]

I tried putting a color inside the MakeTransparent method, but it not only
did not make it transparent, but prevented all of the other stuff from being
drawn as well. Here is my code (note that the Clear method has the same
color as the MakeTransparent method):

Dim transbitmap As New Bitmap(400, 400)
Dim transgraphics As Graphics = Graphics.FromImage(transbitmap)
Dim transpen As New Pen(Color.FromArgb(255, 0, 255, 0), 20)
Dim transbrush As New SolidBrush(Color.FromArgb(255, 255, 0, 0))

transgraphics.Clear(Color.FromArgb(0, 255, 255, 255))
transbitmap.MakeTransparent(Color.FromArgb(0, 255, 255, 255))
transgraphics.FillRectangle(transbrush, 100, 100, 200, 200)
transgraphics.DrawRectangle(transpen, 50, 50, 150, 150)
transbitmap.Save(Server.MapPath("GDItest.gif"), Imaging.ImageFormat.Gif)

Is there something wrong with the way I am using the MakeTransparent method?
What do I need to do to make areas of my image transparent? Thanks.

 

[Lloyd Dupont]

GWBYF (aka Google Would Be Your Friend != RTFM)
http://www.bobpowell.net/giftransparency.htm

 

[Nathan Sokalski]

I have tried searching (I've spent almost 2 months trying to find an
answer), but none of the stuff I found seemed to help.

 

[Lloyd Dupont]

allright, allright, but have you checked the link I posted as well?
(this one: http://www.bobpowell.net/giftransparency.htm)
should fix it!

 

[Kevin Spencer]

Bitmap Transparency is not supported in browsers. Only GIFs and PNGs are
transparent, and only GIFs are universally transparent in browsers. The
article I sent you to doesn't use BitMap.MakeTransparent(). I am not sure
why you keep bringing this up. It is a simple matter of following
instructions. The functions you use in your app are not a goal, but should
only be used if they are a means TO your goal. Let's say you're baking a
cake. Why on earth would you need or want to use a meat grinder in the
process? A meat grinder is for grinding meat, not for baking a cake.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Expect the unaccepted.

 

[Kevin Spencer]

Check out the sample code from the article I referred to you:

protected ColorPalette GetColorPalette( uint nColors )
{
// Assume monochrome image.
PixelFormat bitscolordepth = PixelFormat.Format1bppIndexed;
ColorPalette palette; // The Palette we are stealing
Bitmap bitmap; // The source of the stolen palette

// Determine number of colors.
if (nColors > 2)
bitscolordepth = PixelFormat.Format4bppIndexed;
if (nColors > 16)
bitscolordepth = PixelFormat.Format8bppIndexed;

// Make a new Bitmap object to get its Palette.
bitmap = new Bitmap( 1, 1, bitscolordepth );

palette = bitmap.Palette; // Grab the palette

bitmap.Dispose(); // cleanup the source Bitmap

return palette; // Send the palette back
}

That doesn't look anything like what you wrote, regardless of the language.
The palette is retrieved from a Bitmap of a specific paletted format. Are
you having trouble translating from C# to VB? If so, I can do it for you.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Expect the unaccepted.

 

[Guest]

You should ckeck out this article. It helped me a lot in over coming
problems with keeping transparency in GIF's.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspp/html/colorquant.asp

Martyn