Geeks With Blogs
The Z-man Blogeth I think, therefore I get a headache.

Sometimes I find that I want some text to change on my web site based on a user, or user selection.  This is generally an easy task, but what happens when you want to display it in a non web safe font?  Sure, you could just create a new image for each different text that you want to display.  But that would be tedious and not a lot of fun. 

I prefer to dynamically generate the image with the GDI+ library.  This way you can use any windows true type font to easily create a new image with text.  To start you need to create a web project and add an aspx web page.  Don't do anything to the aspx page, we will do all of our work in the code behind page.  Next we're going to start coding in the Page_Load event.

Lets create a  bitmap to draw on:

      Using bmp As New Drawing.Bitmap(300, 50)

Next we're going to load the bitmap we just created into a graphics object, the graphics object will do all of the drawing on the image.  You can draw text, rectangles, ellipses, etc.

      Using gfx As Drawing.Graphics = Drawing.Graphics.FromImage(bmp) 

With the next line were going to set the image background to white:

         gfx.Clear(Drawing.Color.White)

Now we need to create the font and set the font attributes, lets use the True Type font 'Impact' and set it to bold and make it 24pt.

      Using fnt As New Drawing.Font("Impact", 24, Drawing.FontStyle.Bold, Drawing.GraphicsUnit.Point)

Last step, save it to the response output stream as a jpeg

      bmp.Save(Response.OutputStream, Drawing.Imaging.ImageFormat.Jpeg)

So, here it is all together:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      Using bmp As New Drawing.Bitmap(300, 50)
            Using gfx As Drawing.Graphics = Drawing.Graphics.FromImage(bmp) 
                  gfx.Clear(Drawing.Color.White) 
                  Using fnt As New Drawing.Font("Impact", 24, Drawing.FontStyle.Bold, Drawing.GraphicsUnit.Point) 
                        gfx.DrawString("Custom Text", fnt, Drawing.Brushes.Black, 0, 0) 
                  End Using
            End Using 
            bmp.Save(Response.OutputStream, Drawing.Imaging.ImageFormat.Jpeg) 
      End Using
End Sub

Here's how it looks:

Now let's dress it up a little:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      Using bmp As New Drawing.Bitmap(300, 50)
            Using gfx As Drawing.Graphics = Drawing.Graphics.FromImage(bmp) 
                  gfx.Clear(Drawing.Color.White) 
                  Using fnt As New Drawing.Font("Impact", 24, Drawing.FontStyle.Bold, Drawing.GraphicsUnit.Point) 
                         gfx.FillRectangle(Drawing.Brushes.Gray, 2, 2, 206, 46)
                         gfx.FillRectangle(Drawing.Brushes.LightBlue, 5, 5, 200, 40)

                        
gfx.DrawString("Custom Text", fnt, Drawing.Brushes.Black, 16, 9) 
                         gfx.DrawString("Custom Text", fnt, Drawing.Brushes.Black, 13, 6) 
                  End Using
            End Using 
            bmp.Save(Response.OutputStream, Drawing.Imaging.ImageFormat.Jpeg) 
      End Using
End Sub

As you can see the possibilities are endless, depending how artistic you are.

Scott Zischerk

Ann Arbor .Net Developers Member

Posted on Friday, December 22, 2006 3:13 AM VB.NET | Back to top


Comments on this post: Tech Tips: Creating dynamic images on the web with GDI+

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Scott Zischerk | Powered by: GeeksWithBlogs.net