Nannette Thacker ShiningStar.net

ASP.net Web Application Development

Sponsors

News

See all Blog Posts by Nannette.

Nannette Thacker, consultant and owner of Shining Star Services LLC, specializes in development of custom dynamic database driven web applications utilizing ASP.net technologies. Nannette has been developing ASP sites since 1997. Nannette has written numerous articles on web development techniques and tutorials.

Nannette is the owner and developer of ChristianSinglesDating.com.

 Subscribe in a reader





View Nannette  Thacker's profile on LinkedIn

Image Text using GDI+: Creating an Image from Text or Adding Text to an Existing Image

There are some nice tutorials on how to display text as an image. Some examples of when you might wish to use something like this is perhaps if you wish to display your email address on a web page, but don't want it to be harvested by spammers; a CAPTCHA for authenticating a real person on log in, or adding a URL to existing images on your site to keep them from being "swiped" by others.

I'm going to demonstrate the last scenario, a simple method that will print text to the bottom left of an image. You could easily alter it to pass in the x and y coordinates of where you wish to add the text, if desired.

Please download the ImageEdit.zip which contains code for both this example and an example of Resizing ASP.NET Images Using GDI+ Dynamically

Here is what our final image will look like:

In my code-in-front, I have this:

<asp:Image ID="Image1" runat="server" /><br />
<asp:Button ID="Button1" runat="server" Text="Button" />

In the code-behind I make sure to import:

Imports System.Drawing
Imports
System.Drawing.Imaging

You may add this to your Page_Load or a button click event or some method you call:

Dim fileNameFrom As String = Server.MapPath("~/Images/PiperAtComputer.jpg")
Dim fileNameTo As String = Server.MapPath("~/Images/test2.jpg")
TextOnImage(
"Programming Is Fun!", fileNameFrom, fileNameTo)
Image1.ImageUrl = "~/Images/test2.jpg"

From the above, you see that to call our TextOnImage method, pass in a path from your root directory.

Protected Sub TextOnImage(ByVal textString As String, _
ByVal fileNameFrom As String, _
ByVal fileNameTo As String)

Dim Bmp As Drawing.Bitmap = Drawing.Bitmap.FromFile(fileNameFrom)

Using graphicsImage As Graphics = Graphics.FromImage(Bmp)
Dim typeFont As New Font("Arial", 8, FontStyle.Bold)' get height of current image
Dim height As Integer = Bmp.Height
' start string in 2 pixels from left and 15 pixels up from the bottom of the image
Dim leftMargin As Integer = 2
Dim bottomMargin As Integer = height - 15

graphicsImage.DrawString(textString, typeFont, Brushes.WhiteSmoke, leftMargin, bottomMargin)
Bmp.Save(fileNameTo, ImageFormat.Jpeg)

End Using
Bmp.Dispose()

End Sub

Other examples show how to create a new image from text.

Dynamic ASP.NET Text Image (C#) - This shows how to take text and display it as an image. Within this article, a reader posts a message how to do this with a transparent background (VB) which he altered after viewing this code (C#). Another readers shows how to display an image in an image control.

Programmatically add text to an image (C#)

May your dreams be in ASP.NET! 

P.S. Some other imaging urls of interest:

Displaying Dynamically Generated Images (C#) -  I downloaded this zip project and it works with 3.5 framework. The demo zooms and enlarges an image of a pineapple.

Graphics in VB.NET - Articles, Resources, Downloads, Blogs, Book Chapters, Tutorial, Source code

GDI+ & Graphics in C# - Articles, Resources, Downloads, Blogs, Book Chapters, Tutorial and Source code

Getting Started with GDI+ in C# Applications

GDI+ in VB.NET Tutorial for Beginners

Opening and viewing Images and Text files

Image Conversion Utility in C#

Comments

SGWellens said:

Does that dog in the picture have his paw on the pause key?

# January 14, 2009 10:29 AM

rrobbins said:

GD-Sharp the .NET wrapper for the GD Library, can also be used for this kind of thing.

# January 14, 2009 3:05 PM

nannette said:

Lol.

You mean the "paws" key?

# January 14, 2009 3:56 PM

SGWellens said:

FYI: You can also use the Microsoft Chart Control to create text-bitmaps dynamically:  

weblogs.asp.net/.../stupid-chart-tricks.aspx

# January 14, 2009 4:03 PM

nannette said:

Great! thanks for sharing Steve!

# January 14, 2009 5:05 PM

DotNetShoutout said:

Thank you for submitting this cool story - Trackback from DotNetShoutout

# January 16, 2009 7:55 PM

p said:

thankssssssssss a  lot for the code

# April 20, 2010 5:31 AM

Resizing ASP.NET Images Using GDI+ Dynamically - Nannette Thacker ShiningStar.net said:

Pingback from  Resizing ASP.NET Images Using GDI+ Dynamically - Nannette Thacker ShiningStar.net

# September 19, 2010 6:06 PM

Steve Chalem said:

Thank you so much for this!  I'm just delving into simple graphics development in VS2010.  I searched for hours about how to do this before I found your beautiful code example.

# December 7, 2010 6:08 PM

darakhshan & madhuri said:

thanks a lot..... your code helped us in our final project

# April 10, 2011 8:03 AM

shyam said:

can u save the Image too........

# May 28, 2011 5:06 AM

bebeto said:

Thanks!

# February 24, 2012 1:03 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)