Library tutorials & articles

Creating Images on the Fly with ASP.NET

By Craig Navin, published on 19 Jun 2002
Craig Navin
Page 2 of 2
  1. Introduction
  2. Drawing the graphics

Drawing the graphics

Next we want to get an instance of the Graphics object so we can start drawing our image. We first need to create a Bitmap with a specified dimension and then use this Bitmap to get an instance of the Graphics object.

Dim objBitmap As Bitmap
Dim objGraphics As Graphics

objBitmap = New Bitmap(200, 200)
objGraphics = Graphics.FromImage(objBitmap)

Now that we have an instance of the Graphics object, we can start drawing our image. To draw a line diagonally across our Graphics object, we use the DrawLine method. We pass a Pen object as well as the start and end points of the line. The Pen object specifies the width, color, line style and other attributes of the line.

objGraphics.DrawLine(new Pen(Color.Red), 0, 0, 200, 200)

When we are finished drawing the image we must save the Bitmap to an output stream. Since we want to send the image to a web browser we save the Bitmap to the Http output stream and specify the image type we want to send it back as.

objBitmap.Save(Response.OutputStream, ImageFormat.Gif)

To help the garbage collector we dispose of the Bitmap and the Graphics object.

objBitmap.Dispose()
objGraphics.Dispose()

Putting all the code together our aspx file would look like this.

<%@ Page ContentType = "image/gif"%>
<%@ Import Namespace = "System.Drawing" %>
<%@ Import Namespace = "System.Drawing.Imaging" %>

<Script Runat = "Server">

Sub Page_Load

Dim objBitmap As Bitmap
Dim objGraphics As Graphics

objBitmap = New Bitmap(200, 200)
objGraphics = Graphics.FromImage(objBitmap)

objGraphics.DrawLine(new Pen(Color.Red), 0, 0, 200, 200)

objBitmap.Save(Response.OutputStream, ImageFormat.Gif)

objBitmap.Dispose()
objGraphics.Dispose()
End Sub

</Script>

Although this is a very simple example, it illustrates the steps necessary to create an image on the fly using the .Net framework. In my next article I will show how we can use this method to develop a graph.

Related tags

asp.net

Comments

  1. Paul Reed
    22 Oct 2006 at 10:49

    This has just solved a problem I have spent two weeks trying to solve. Even thought it was in VB and I needed it in C# I was still able to use it as converting it over was easy enough.

    Excellent work.





  2. ananasgroup
    26 Sep 2004 at 03:34

    You can skip this and just d/l ImageIN. Its an amazing free multi layer composition object which allows you to do many things... (http://www.cyberbob.com)

  3. KrishManohar
    10 Mar 2004 at 15:54

    I am Also intrested in this idia!


    Mosly dealing with online desing, submited to my e-mail.


    I am sure it's dealing with Java Script or ASP i have some Links to a example of what i am looking for:



    http://www.logocrazy.com/businesscards/logocards/logocards3.asp
    http://209.209.50.113/magneticsigns/logosigns3.asp

  4. magnetmagic2
    10 Mar 2004 at 00:09

    Quote:
    [1]Posted by lea on 2 Jan 2003 08:52 AM[/1]
    Hi I am trying to create an online design system for business cards. the user selects the template with the design already made from the database and it allows you to enter your title name address, company ect to the card, trouble i am having is how i would i go about doing this, am good with db and asp any ideas would be great, have had a look at .net system.drawing does anyone think this would solve my problem is there properties to draw the text that the user wants to change or how would i re-assemmble the card with the new details and inbed it all into the one image, looking for any ideas or websites that could help me thanx
    Lea


    Lea or Farouk,


    Did you find a solution for the online design?  I am looking for the same, willing to pay for advice.
    Thanks,
    Dan
    magnetmagic@yahoo.com

  5. Mohamed Farouk
    20 Jun 2003 at 08:45

    Hi
    Can yuo please tell me what technology or code you used for handling business card design system. I would really appreciate your help
    I are trying to do something very similar please
    Farouk

  6. Stefaan Vandevelde
    29 May 2003 at 12:20

    Hi,


    I'm using similar code to create a floorplan on the fly with database input.
    I experience great difficulties to create a GIF file with non-ditchered colors and transparent background.
    Anybody knows how to tackle this one ?


    I found an article about re-coloring GIF images for transparent and non-ditchered colors at msdn, but this is for existing images and it's bloody complicated.  Anybody knows a simple solution when creating GIF files from scratch ?


    Stefaan

  7. fredo
    07 Feb 2003 at 22:42

    I'm not sure if this will help you, but I am doing some pretty complex client side drawing with SVG. It's XML & it's scriptable (javascript).  Images can be generated client & server side. If someone can do this, then for sure you can create business cards.  http://www.adobe.com/svg/demos/main.html

  8. lea
    02 Jan 2003 at 08:52

    Hi I am trying to create an online design system for business cards. the user selects the template with the design already made from the database and it allows you to enter your title name address, company ect to the card, trouble i am having is how i would i go about doing this, am good with db and asp any ideas would be great, have had a look at .net system.drawing does anyone think this would solve my problem is there properties to draw the text that the user wants to change or how would i re-assemmble the card with the new details and inbed it all into the one image, looking for any ideas or websites that could help me thanx
    Lea

  9. vyas
    07 Nov 2002 at 05:55

    Dear Craig,


    I've an Windows Form custom control (an analog gauge control) to which I want to add the functionality of returning the drawn gauge image as bytes.  I wanted to create a Bitmap image from the Graphics object.  Unfortunately, I learnt that the Bitmap() constructor that took in a Graphics object doesn't actually create a representation of the image drawn on the Graphics object.  And I am stuck.


    I want to know a couple of things:


    1.


    I have a fully drawn image on a Graphics object.  I want to save this into a Bitmap object.  I don't have the liberty of creating a new Graphics object (the Graphics property of PaintEventArgs is read-only) and that might rule out the Graphics.FromImage(bitmap) approach.


    2.
    Also, I want to use this control on my ASP.Net code-behind class for generating an image of itself that would be streamed to the browser.


    Say, I would add a method, GetImageAsBytes(), that would return a byte array of the image of the control.
    I would write this image using


    Response.ContentType = "image/gif";
    Response.BinaryWrite(objGauge.GetImageAsBytes());
    Response.End();


    Would this approach work?  What's the Pros & Cons of using a Windows Forms control on an ASP page?  Would I be able to get a Graphic context at all (the code sure didn't throw up any errors).


    Ideas?


    Regards,


    Vyas



  10. Developer Fusion Bot
    01 Jan 1999 at 00:00

    This thread is for discussions of Creating Images on the Fly with ASP.NET.

Leave a comment

Sign in or Join us (it's free).

AddThis

Related articles

Ask a question

Related discussion

Related podcasts

  • CodeCast Episode 4: State of .NET, IE8, ASP.NET MVC, and O'Reilly Media

    CodeCast Episode 4: State of .NET, IE8, ASP.NET MVC, and O'Reilly MediaHosts Ken Levy and Markus Egger discuss the new State of .NET events, IE8, ASP.NET MVC, followed by an interview from PDC with two editors from O'Reilly Media. More on ASP.NET MVC can be found at http://asp.net/mvc. Interview...

Related jobs

Events coming up

Languages

Web Development

Frameworks & Architecture

Other major sections