Search code examples
c#winformsgdi

Adding text to an Image programmatically appears blurry

I'm trying to add some text to an Image programmatically and later I save it. But the end result is somewhat not convincing.

The text on the image appears quite blurry.

The snippet I use to render is as follows :

static void ModifyImage()
{
    Image origImage;
    if (File.Exists(path))
    {
        using (Stream s = new FileStream(path, FileMode.Open, FileAccess.Read))
        {
            origImage = Image.FromStream(s);
        }

        using (Image newImage = new Bitmap(path))
        {
            // Get the image's original width and height
            int originalWidth = origImage.Width;
            int originalHeight = origImage.Height;

            // To preserve the aspect ratio
            float ratio = Math.Min((float)originalWidth, (float)originalHeight);

            Graphics graphics = Graphics.FromImage(newImage);
            graphics.SmoothingMode = SmoothingMode.HighQuality;
            graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphics.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;

            string strSoftwareVersion = "Version " + StrVersion;

            var oVersionFont = new Font("Arial", 15f, FontStyle.Bold);
            SizeF strSize = graphics.MeasureString(strSoftwareVersion, oVersionFont);

            float mX = (float)((originalWidth * 0.85) - 5.0);
            float mY = (float)((originalHeight * 0.85) - 5.0);
            float mWidth = (float) (strSize.Width + 5.0);
            float mHeight = (float)(strSize.Height + 10.0);

            /*
             * Alternate I tried.
             */
            //GraphicsPath blackfont = new GraphicsPath();
            //SolidBrush brsh = new SolidBrush(Color.White);
            //blackfont.AddString("TEST APP", oVersionFont.FontFamily, (int)FontStyle.Bold, 15, new Point((int)(originalWidth * 0.85), (int)(originalHeight * 0.85)), StringFormat.GenericDefault);
            //graphics.FillPath(brsh, blackfont);

            /*
             *Software Version String 
             */
            graphics.DrawString("Version " + StrVersion, new Font("Arial", 15f, FontStyle.Bold), Brushes.White, (int)(originalWidth * 0.85), (int)(originalHeight * 0.85));

            /*
             * Save processed image 
             */
            newImage.Save(newPath, ImageFormat.Jpeg);
        }
        origImage.Dispose();
    }
}

enter image description here
As you can see from the image, the blurriness of the text and surrounding areas are quite prominent. I'm quite sure this is due to the Aliasing or TextRendering issue with the alpha levels, but just not able to point the exact issue.

Solution

  • The text looks fine to me.

    To make it crispier you can turn off all antialiasing.

    The 'surrounding areas' obviously show some jpeg artifacts.

    Good text and jpeg don't go together well.

    Either turn up jpeg quality settings up from the default (of around 75%) or go for png!

    Note that 90-95% quality, while greatly improving text quality also greatly enlarges size and going for png may well save you space in addition to being lossless..