Adding Text to an Image

23 06 2010

I had a blank calendar icon that I needed to draw a date on to depending on the user that was signed in to my website. It took some fiddling, but eventually after a few errors and some searching, I have the solution. On my ASP.net page, I have 2 images: calenderIcon and blankCalenderIcon. Both of these have their ‘Visible’ attribute set to false. blankCalenderIcon is the image I always start with and that is never changed, and calenderIcon is the image that has been modified to include a date. The code snippets are originally broken up to allow me to explain easier what is going on and provide some relevant links. However there is a full code snippet at the end of the post without any explanations.

Firstly, as there is a crossover here between System.Drawing.Image and System.Web.UI.WebControls.Image, I had to save the image I had placed on my page as a System.Drawing.Image.

System.Drawing.Image img = null;
img = System.Drawing.Image.FromFile(Server.MapPath(blankCalenderIcon.ImageUrl));

Then in order to edit the image, and save it back to it’s original ‘ImageUrl’ path, you need to create 2 Bitmap objects. If you try and do all of this with one Bitmap object, you will get the following error, "A generic error occurred in GDI+". This is because the file is locked. For a more in depth explanation, click here.

Bitmap originalCalender = new Bitmap(img);
Bitmap newCalender = new Bitmap(originalCalender.Width, originalCalender.Height);
Graphics newG = Graphics.FromImage(newCalender);
newG.DrawImage(originalCalender,0,0);

Now that you have your Graphics object that contains the blank image, you can add the text to it. I personally set the Anti Aliasing for smoothness, that’s obviously not a necessity. I then use the DrawString method to place my text on the image. For some further info on how to do this and how it works, click here.

newG.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
StringFormat strFormat = new StringFormat();
strFormat.Alignment = StringAlignment.Center;
newG.DrawString("July 2011", new Font("Arial", 12), Brushes.White, new RectangleF(12,5,newCalender.Width, 30));

Now that your new image is ready, you need to dispose of your graphics object, your originalBitmap and in this case the Image object created to allow us to create the original Bitmap object (I say in this case because in a Windows Forms application, that step wouldn’t have been necessary).

newG.Dispose();
originalCalender.Dispose();
img.Dispose();

Now that everything has been disposed, you can save your new Bitmap object back to your original icons ‘ImageUrl’ and then in my case, make the icon visible.

newCalender.Save(Server.MapPath(calenderIcon.ImageUrl));
calenderIcon.Visible = true;

And now you will see your original Image, but with your text added. Magical!

System.Drawing.Image img = null;
img = System.Drawing.Image.FromFile(Server.MapPath(blankCalenderIcon.ImageUrl));
Bitmap originalCalender = new Bitmap(img);
Bitmap newCalender = new Bitmap(originalCalender.Width, originalCalender.Height);
Graphics newG = Graphics.FromImage(newCalender);
newG.DrawImage(originalCalender,0,0);
newG.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
StringFormat strFormat = new StringFormat();
strFormat.Alignment = StringAlignment.Center;
newG.DrawString("July 2011", new Font("Arial", 12), Brushes.White, new RectangleF(12,5,newCalender.Width, 30));
newG.Dispose();
originalCalender.Dispose();
img.Dispose();
newCalender.Save(Server.MapPath(calenderIcon.ImageUrl));
calenderIcon.Visible = true;

Advertisements

Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: