How to generate an image from text on fly at runtime

Question

Can anyone guide how to generate image from input text. Image might have any extension doesn't matter.

Coaming

Do you mean an image like you'd get from a screen capture? Certainly, some formats/extensions would be better than others. – Nephelometer

What kind of text input do you mean? – Grady

No it's not screen capture we have input textbox and we are using C# – Coaming

Answer 1

Ok, assuming you want to draw a string on an image in C#, you are going to need to use the System.Drawing namespace here:

private Image DrawText(String text, Font font, Color textColor, Color backColor)
{
    //first, create a dummy bitmap just to get a graphics object
    Image img = new Bitmap(1, 1);
    Graphics drawing = Graphics.FromImage(img);

    //measure the string to see how big the image needs to be
    SizeF textSize = drawing.MeasureString(text, font);

    //free up the dummy image and old graphics object
    img.Dispose();
    drawing.Dispose();

    //create a new image of the right size
    img = new Bitmap((int) textSize.Width, (int)textSize.Height);

    drawing = Graphics.FromImage(img);

    //paint the background
    drawing.Clear(backColor);

    //create a brush for the text
    Brush textBrush = new SolidBrush(textColor);

    drawing.DrawString(text, font, textBrush, 0, 0);

    drawing.Save();

    textBrush.Dispose();
    drawing.Dispose();

    return img;

}

This code will measure the string first, and then create an image of the correct size.

If you want to save the return of this function, just call the Save method of the returned image.

Meta

The line "Image img = new Bitmap(0, 0);", doesn't work: you can't create a 0-sized Image. Change it to "new Bitmap(1, 1)", it works. – Donell

If you add drawing.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias; before the drawing.DrawString(text, font, textBrush, 0, 0); line, you'll get smoother anti-aliased text. – Marcellus

If you double the font size and then reduce the resulting image size by half you can get even beter looking results, this works especially good on small and symbol fonts. – Lucilius

Answer 2

Thanks Kazar. A slight improvement of the previous answer to use USING for the dispose of the image/graphic objects after used and the introduction of min size param

    private Image DrawTextImage(String currencyCode, Font font, Color textColor, Color backColor) {
        return DrawTextImage(currencyCode, font, textColor, backColor, Size.Empty);
    }
    private Image DrawTextImage(String currencyCode, Font font, Color textColor, Color backColor, Size minSize) {
        //first, create a dummy bitmap just to get a graphics object
        SizeF textSize;
        using (Image img = new Bitmap(1, 1)) {
            using (Graphics drawing = Graphics.FromImage(img)) {
                //measure the string to see how big the image needs to be
                textSize = drawing.MeasureString(currencyCode, font);
                if (!minSize.IsEmpty) {
                    textSize.Width = textSize.Width > minSize.Width ? textSize.Width : minSize.Width;
                    textSize.Height = textSize.Height > minSize.Height ? textSize.Height : minSize.Height;
                }
            }
        }

        //create a new image of the right size
        Image retImg = new Bitmap((int)textSize.Width, (int)textSize.Height);
        using (var drawing = Graphics.FromImage(retImg)) {
            //paint the background
            drawing.Clear(backColor);

            //create a brush for the text
            using (Brush textBrush = new SolidBrush(textColor)) {
                drawing.DrawString(currencyCode, font, textBrush, 0, 0);
                drawing.Save();
            }
        }
        return retImg;
    }

Etherify

Answer 3

Here is Panayiotis' version of Kazar's answer with optional parameters and documentation, suitable for adding to a library class.

/// <summary>
/// Creates an image containing the given text.
/// NOTE: the image should be disposed after use.
/// </summary>
/// <param name="text">Text to draw</param>
/// <param name="fontOptional">Font to use, defaults to Control.DefaultFont</param>
/// <param name="textColorOptional">Text color, defaults to Black</param>
/// <param name="backColorOptional">Background color, defaults to white</param>
/// <param name="minSizeOptional">Minimum image size, defaults the size required to display the text</param>
/// <returns>The image containing the text, which should be disposed after use</returns>
public static Image DrawText(string text, Font fontOptional=null, Color? textColorOptional=null, Color? backColorOptional=null, Size? minSizeOptional=null)
{
    Font font = Control.DefaultFont;
    if (fontOptional != null)
        font = fontOptional;

    Color textColor = Color.Black;
    if (textColorOptional != null)
        textColor = (Color)textColorOptional;

    Color backColor = Color.White;
    if (backColorOptional != null)
        backColor = (Color)backColorOptional;

    Size minSize = Size.Empty;
    if (minSizeOptional != null)
        minSize = (Size)minSizeOptional;

    //first, create a dummy bitmap just to get a graphics object
    SizeF textSize;
    using (Image img = new Bitmap(1, 1))
    {
        using (Graphics drawing = Graphics.FromImage(img))
        {
            //measure the string to see how big the image needs to be
            textSize = drawing.MeasureString(text, font);
            if (!minSize.IsEmpty)
            {
                textSize.Width = textSize.Width > minSize.Width ? textSize.Width : minSize.Width;
                textSize.Height = textSize.Height > minSize.Height ? textSize.Height : minSize.Height;
            }
        }
    }

    //create a new image of the right size
    Image retImg = new Bitmap((int)textSize.Width, (int)textSize.Height);
    using (var drawing = Graphics.FromImage(retImg))
    {
        //paint the background
        drawing.Clear(backColor);

        //create a brush for the text
        using (Brush textBrush = new SolidBrush(textColor))
        {
            drawing.DrawString(text, font, textBrush, 0, 0);
            drawing.Save();
        }
    }
    return retImg;
}

Christianism

Nice job. Simple, helpful, and I like that you set defaults! – Poeticize

Nice to handle min height and width. Could you please help to handle max width also, so that if text width goes above max width, remaining data will come in next line and then image created according to it. – Imprest

Answer 4

use imagemagick for rendering text on images (on the server)

Since you are in C# you could also use the .Net classes for bitmap and font manipulation directly (with the classes like: System.Drawing.Bitmap and System.Drawing.Graphics)

Daron

Answer 5

I just translated this method mentioned in this answer to a VB.NET method. Maybe this helps someone.

Public Function DrawText(ByVal text As String, ByRef font As   Font, ByRef textColor As Color, ByRef backColor As Color) As Image
    ' first, create a dummy bitmap just to get a graphics object
    Dim img As Image = New Bitmap(1, 1)
    Dim drawing As Graphics = Graphics.FromImage(img)

    ' measure the string to see how big the image needs to be
    Dim textSize As SizeF = drawing.MeasureString(Text, Font)

    ' free up the dummy image and old graphics object
    img.Dispose()
    drawing.Dispose()

    ' create a new image of the right size
    img = New Bitmap(CType(textSize.Width, Integer), CType(textSize.Height, Integer))

    drawing = Graphics.FromImage(img)

    ' paint the background
    drawing.Clear(BackColor)

    ' create a brush for the text
    Dim textBrush As Brush = New SolidBrush(textColor)

    drawing.DrawString(text, font, textBrush, 0, 0)

    drawing.Save()

    textBrush.Dispose()
    drawing.Dispose()

    Return img

End Function

Edit: Fixed typo.

Ways

Thanks Freddy, you saved me a lot of energy. – Albano

Answer 6

F# version:

open System.Drawing

let drawText text font textColor backColor =
    let size =
      use dummyImg = new Bitmap(1, 1)
      use drawing = Graphics.FromImage(dummyImg)
      drawing.MeasureString(text, font)
    let img = new Bitmap((int size.Width), (int size.Height))
    use drawing = Graphics.FromImage(img)
    use textBrush = new SolidBrush(textColor)
    do 
      drawing.Clear(backColor)
      drawing.DrawString(text, font, textBrush, PointF())
      drawing.Save() |> ignore
    img

Brannon