65.9K
CodeProject is changing. Read more.
Home

Dynamically Write Text On An Image

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.74/5 (32 votes)

Jun 18, 2004

1 min read

viewsIcon

315425

downloadIcon

12708

If you have a pre-existing graphic and you want to write some text over it...

Introduction

This article shows you how to dynamically write text on a pre-existing image, with ASP.NET and C#.

In my example, I have a picture of my son and I write the words “That’s my boy!”. Also, to show that you can combine graphic drawing and text together, I then draw an oval shape around the word that I just put on the picture.

In order to make this sample work, you need the following references:

using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.Drawing.Text;

Also, you might need to play around with where you want your text and oval to go. Remember that both the placement of the text and graphic oval are based on X and Y coordinates. So, if you have to move the text/oval up, then change the value of the Y parameter. If you need to move the text/oval horizontally, then change the value of the X parameter.

There are basically 6 steps for my sample:

  1. Load your image:
    //Load the Image to be written on.
    Bitmap bitMapImage = new 
       System.Drawing.Bitmap(Server.MapPath("dallen.jpg" )  );
    Graphics graphicImage = Graphics.FromImage( bitMapImage ); 
  2. Set the graphics to be smooth.
    //Smooth graphics is nice.
    graphicImage.SmoothingMode = SmoothingMode.AntiAlias;
  3. Write your text. Here is where you set your font. The X and Y coordinates are in the new point. (100 = X, 250 = Y).
    //Write your text.
    graphicImage.DrawString( "That's my boy!", 
       new Font("Arial", 12,FontStyle.Bold ), 
       SystemBrushes.WindowText, new Point( 100, 250 ) ); 
  4. Draw your oval around the text. Note: play around with the numbers to make the oval to the correct size that you want.
    //I am drawing a oval around my text.
    graphicImage.DrawArc(new Pen(Color.Red, 3), 90, 235, 150, 50, 0, 360); 
  5. Set the Content Type to jpg and then write your image to the response stream.
    //Set the content type
    Response.ContentType="image/jpeg"; 
    //Save the new image to the response output stream.
    bitMapImage.Save(Response.OutputStream, ImageFormat.Jpeg); 
  6. Clean up.
    //Clean house.
    graphicImage.Dispose();
    bitMapImage.Dispose();