How to Generate PNG Text ASP.NET

Written by kevin lee
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Generate PNG Text ASP.NET
Draw your own image text using ASP.NET classes. (Hemera Technologies/ Images)

You don't have to use paint programs to create text images for your ASP.NET Web pages. Microsoft's .NET platform includes a set of useful graphics classes that allow you to generate text graphics on the fly. Choose from a variety of image formats including BMP, GIF and PNG. To place custom-made PNG text images on your ASP.NET Web page, add a short PNG generator method to your code.

Skill level:


  1. 1

    Start Microsoft Visual Studio and open one of your C# ASP.NET Web projects.

  2. 2

    Locate the project's start-up form, and open its code window. Paste the following "using" statements at the top of the code if they do not appear already:

    using System.Drawing;

    using System.Drawing.Imaging;

    using System.Drawing.Drawing2D;

    These statements make ASP.NET's drawing classes available to the form.

  3. 3

    Add the following method to the code window:

    private void PngGenerator()

    {Response.ContentType = "image/png";


    Response.BufferOutput = true;

    int font Size = 12;

    Font rectangle Font = new Font(

    "Arial", font Size, FontStyle.Bold);

    int height = 150;

    int width = 250;

    The "Response.ContentType" statement tells ASP.NET to create a PNG image. The "fontSize" variable -- 12 in this example -- sets your desired font size in pixels. Change that to a different value if you like. The "height" and "width" variables hold the size of the rectangle in which the text that you draw appears. Those sizes are also in pixels. The "FontStyle.Bold" attribute makes the font bold. Replace "Bold" with "Regular," "Italic," "Strikeout" or "Underline" if you prefer one of those font styles.

  4. 4

    Add the following method to the code window:

    Bitmap bitmap = new Bitmap(

    width, height, PixelFormat.Format24bppRgb);

    Graphics g = Graphics.FromImage(bitmap);

    g.SmoothingMode = SmoothingMode.AntiAlias;

    Colour backgroundColor = Color.White;


    g.DrawString("Generated PNG text", rectangle Font,SystemBrushes.WindowText, new PointF(10, 40));

    bitmap.Save(Response.OutputStream, ImageFormat.Jpeg);





    The first statement creates a Bitmap. The "g.SmoothingMode" property -- set to "AntiAlias" -- allows ASP.NET to draw smoother text. Note the next statement. It sets the desired background colour of your text. Change "White" to another colour to create a different background colour for your text. The "g.DrawString" statement is the most important one. It creates your PNG containing your text. Replace "Generated PNG text" with the text you wish to appear on the Web page. Note the "PointF(100,200)" class instantiation at the end of the statement. That tells ASP.NET to draw your text at the coordinates listed. In this example, the X coordinate is 100 and the Y coordinate is 200. Change those values to place the text where you want it on the screen.

  5. 5

    Place the following statement in the form's "Page_Load" method:


    This calls the "WritePng" method listed in the previous step when the page loads.

Tips and warnings

  • The .NET Graphics classes provide additional functionality that you can use to create more complex graphics. For instance, by changing the "Response.ContentType" to = "image/gif," you could create a GIF text object instead of a PNG. Microsoft provides free help on its website.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.