Can you make an alpha transparent PNG with C#?

Question

I have a multi-browser page that shows vertical text.

As an ugly hack to get text to render vertically in all browsers I've created a custom page handler that returns a PNG with the text drawn vertically.

Here's my basic code (C#3, but small changes to any other version down to 1):

Font f = GetSystemConfiguredFont();
//this sets the text to be rotated 90deg clockwise (i.e. down)
StringFormat stringFormat = new StringFormat { FormatFlags = StringFormatFlags.DirectionVertical };

SizeF size;
// creates 1Kx1K image buffer and uses it to find out how bit the image needs to be to fit the text
using ( Image imageg = (Image) new Bitmap( 1000, 1000 ) )
    size = Graphics.FromImage( imageg ).
        MeasureString( text, f, 25, stringFormat );

using ( Bitmap image = new Bitmap( (int) size.Width, (int) size.Height ) )
{
    Graphics g = Graphics.FromImage( (Image) image );
    g.FillRectangle( Brushes.White, 0f, 0f, image.Width, image.Height );
    g.TranslateTransform( image.Width, image.Height );
    g.RotateTransform( 180.0F ); //note that we need the rotation as the default is down

    // draw text
    g.DrawString( text, f, Brushes.Black, 0f, 0f, stringFormat );

    //make be background transparent - this will be an index (rather than an alpha) transparency
    image.MakeTransparent( Color.White );

    //note that this image has to be a PNG, as GDI+'s gif handling renders any transparency as black.
    context.Response.AddHeader( "ContentType", "image/png" );
    using ( MemoryStream memStream = new MemoryStream() )
    {
        image.Save( memStream, ImageFormat.Png );
        memStream.WriteTo( context.Response.OutputStream );
    }
}

This creates an image that looks how I want it to, except that the transparency is index based. As I'm returning a PNG it could support a proper alpha transparency.

Is there any way to do this in .net?

---

Thanks to Vlix (see comments) I've made some changes, though it still isn't right:

using ( Bitmap image = new Bitmap( (int) size.Width, (int) size.Height, PixelFormat.Format32bppArgb ) )
{
    Graphics g = Graphics.FromImage( (Image) image );
    g.TranslateTransform( image.Width, image.Height );
    g.RotateTransform( 180.0F ); //note that we need the rotation as the default is down

    // draw text
    g.DrawString( text, f, Brushes.Black, 0f, 0f, stringFormat );

    //note that this image has to be a PNG, as GDI+'s gif handling renders any transparency as black.
    context.Response.AddHeader( "ContentType", "image/png" );
    using ( MemoryStream memStream = new MemoryStream() )
    {
        //note that context.Response.OutputStream doesn't support the Save, but does support WriteTo
        image.Save( memStream, ImageFormat.Png );
        memStream.WriteTo( context.Response.OutputStream );
    }
}

Now the alpha appears to work, but the text appears blocky - as if it still has the jaggie edges but against a black background.

Is this some bug with .Net/GDI+? I've already found that it fails for even index transparencies for gifs, so I don't have much confidence it it.

This image shows the two ways this goes wrong:

The top image shows it with no white background or MakeTransparent call. The second with the background filled with white and then MakeTransparent called to add the index transparency.

Neither of these is correct - the second image has white aliasing jaggies that I don't want, the first appears to be solidly aliased against black.

Answer 1

To fix the text "blockiness", can't you just do...

g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;

after this line...

Graphics g = Graphics.FromImage( (Image) image );

Answer 2

IIRC，您需要在位图构造函数中指定PixelFormat。

Answer 3

You can use the LockBits method on your Bitmap to return a BitmapData object, and set the Alpha for each pixel yourself (you could also use GetPixel and SetPixel, but these methods are insanely slow). See this answer .

I know this works for sure, because when I first started using the technique I was setting the alpha value to 0, so none of the colors I was setting were visible.

Edit: here is a sample of a fisheye lens effect, done entirely in .NET (using LockBits):

alt text http://www.freeimagehosting.net/uploads/21ca8300cc.jpg

Answer 4

For text antialiasing play around with values in Graphics.TextRenderingHint. I'd advise not to use ClearType, because that will only show up nice on LCD monitors (not CRT), and might not work due to the rotation.

PS It's Vilx-, not Vlix. :D

Answer 5

Maybe you can find the answer in the source code of this CodeProject article:

Per Pixel Alpha Blend in C#

Answer 6

Sorry, I didn't read your question carefully enough.

I know that I have successfully drawn rotated text on a colored background without seeing either of the aliasing effects in your examples. When I went back to look at my code, I realized that I was drawing the rotated text using a logical font, which is nicely wrapped in the Microsoft.WindowsCE.Forms namespace. This technique sets the drawing angle as a property of the logical font (so you don't call TranslateTransform or RotateTransform).

Outside of the Windows CE world, you have to PInvoke to create a logical font (I've never done this and I couldn't find a good example quickly). I don't know how well this would perform, but I know for sure that it will draw rotated text without the weird aliasing effects you're seeing. I think for sure this is a bug in GDI+ (or just something they didn't think anyone would ever really use).

An alternative approach that might even perform better than the logical font is to draw the text normally on a colored rectangle background (just large enough to hold the text), then rotate-and-copy the rectangle onto your main image. Graphics.DrawImage doesn't appear to be able to do rotation, but this effect is easy to implement using LockBits.

Answer 7

It turns out that Microsoft have a new dynamic image library for the web as part of the Asp.Net content on CodePlex:

http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16449

Unfortunately it's a little bit much for what I want. Using unsafe code I can roll my own alpha transparency, but that's far too slow given this code's use as part of a high-usage web application.

Is this just a bug in MS's GDI+ .Net implementation?

Answer 8

You should at least specify a 32bits pixel format (ex: PixelFormat.Format32bppArgb) when creating your bitmap, otherwise GDI+ cannot manage transparency.

To tune the resulting file when saving, you can use Save with ImageCodecInfo and EncoderParameters.

Answer 9

或者，您可以仅将文本呈现为非透明的PNG，但可以使用与单元格的背景颜色匹配的背景颜色（而不是白色）。