Problems with rendering text as bitmaps using WPF

Question

I am developing an application using WPF to dynamically render content, including text and images from WPF into jpg files. I am currently using the RenderTargetBitmap class to do the job. Everything works as expected but the quality of the rendered fonts is terrible. I understand that the RenderTargetBitmap doesn’t use the ClearType but a GrayScale antialias, which is kind of blury with small fonts. But I am using large fonts, larger than 30 pts, and the results are totally unacceptable. Is there some kind of workaround for this issue?

[Update]

The Code I am using is listed below. As expected it is called on each Rendering event of the CompositionTarget.

void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            prefix = "";
            if (counter < 10)
            {
                prefix = "000";
            }
            else if (counter < 100)
            {
                prefix = "00";
            }
            else if (counter < 1000)
            {
                prefix = "0";
            }

            Size size = new Size(MainCanvas.Width, MainCanvas.Height);
            MainCanvas.Measure(size);
            MainCanvas.Arrange(new Rect(size));


            RenderTargetBitmap bmp = new RenderTargetBitmap(imgWidth, imgHeight, 96d, 96d, PixelFormats.Default);
            bmp.Render(MainCanvas);

            JpegBitmapEncoder encoder = new JpegBitmapEncoder();
            encoder.QualityLevel = 90;
            encoder.Frames.Add(BitmapFrame.Create(bmp));
            string file = basePath + prefix + counter.ToString() + "_testpic.jpg";
            using (Stream stm = File.Create(file))
            {
                encoder.Save(stm);
            }
            counter++;
        }

Here are some examples of the resulting images: alt text http://www.randomnoise.org/temp/testpic_v1.jpg alt text http://www.randomnoise.org/temp/testpic_v2.jpg

Thanks in advance.

Answer 1

Ok, I finally found a solution. Gustavo you were on the right track. The problem was that the main container that I was trying to render as bitmap was being distorted by its parent container. The solution was to add the main container to a canvas, that doesn't have a layout engine that distorts its children. I still need to do some more experimenting but it looks very promising. Apparently RenderTargetBitmap doesn't like distorted fonts at all.

Answer 2

Try this:

int height = (int)border.ActualHeight;
int width = (int)border.ActualWidth;
RenderTargetBitmap bmp = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Pbgra32);
bmp.Render(border);

border being what you're trying to save as bitmap.