Your First Graphics Web Application in GDI+

This article has been excerpted from book "Graphics Programming with GDI+".

Now it's time to use GDI+ in Web applications. First we'll write some code and then we'll discuss how GDI+ Web applications work.

In this application we will draw a few simple graphics objects, including lines and rectangles. First we create a Web Application using Visual Studio .NET. After creating a Web application, we need to add a GDI+-related namespace to the project. We import namespaces as follows:

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

NOTE

If you use Visual Studio .NET to create your Web application, the wizard will add System and System.Drawing namespace references automatically.

Now we add code to draw graphics objects. Listing 12.2 draws two lines and a rectangle. You can write the code on the page-load event handler or on a button click event handler.

LISTING 12.2: Drawing simple graphics objects on the Web

        private void Page_Load(object sender, System.EventArgs e)
        {
            //Create pens and brushes
            Pen redPen = new Pen(color.Red, 3);
            HatchBrush brush =
            new HatchBrush(HatchStyle.Cross,
            Color.Red, Color.Yello);
            //Create a Bitmap object
            Bitmap curBitmap = new Bitmap(200, 200);
            //Create a Graphics FromImage (curBitmap);
            //Draw and fill rectangle
            g.FillRectangle(brush, 50, 50, 100, 100);
            g.DrawLine(Pens.WhiteSmoke, 10, 10, 180, 10);
            g.DrawLine(Pens.White, 10, 10, 10, 180);
            //Save the Bitmap object and send response to the browser
            curBitmap.Save(Response.OutputStream,
            ImageFormat.Jpeg);
            //Dispose of Graphics and Bitmap objects
            curBitmap.Dispose();
            g.Dispose();
        }

We will discuss this code in more detail in the following section. If you are using a text editor to write your applications, you can write the code given in Listing 12.3.

LISTING 12.3: Using a text editor to draw simple graphics

<%@ Import Namespace="System" %>
<%@ Import Namespace="System".Drawing %>
<%@ Import Namespace="System".Drawing.Drawing2D %>
<%@ Import Namespace="System".Drawing.Imaging %>

<script language ="C#" runat="server">

void Page_Load (object sender, EventArgs e)
{
Pen redPen = new Pen(Color.Red, 3);
HatchBrush brush = new HatchBrush (HatchStyle.Cross,
Color.Red, color.Yellow);
Bitmap curBitmap = new Bitmap(200, 200);
Graphics g = Graphics.FromImage (curBitmap);
g.FillRectangle (brush, 50, 50, 100, 100);
g.DrawLine (Pens.WhiteSmoke, 10, 10, 180, 10);
g.DrawLine (Pens.White, 10, 10, 10, 180);
curBitmap.Save (Response.OutputStream,
ImageFormat.Jpeg);
g.Dispose();
}
</script>



FIGURE 12.9: Drawing simple graphics objects on the Web

Now when we run our application, the output generated by Listing 12.2 or 12.3 should look like Figure 12.9.

How Does It Work?

Let's break down the code shown in Listings 12.2 and 12.3. We begin by importing GDI+-related namespaces in the application: System, System.Drawing, System.Drawing.Drawing2D, and System.Drawing.Drawing.Imaging. If we were using Visual Studio .NET, we would simply use the using directive followed by the namespace name.

Next we have a Page_Load event, which is executed when a Web page is loaded. We create a pen and brush using the Pen and HatchBrush classes.

        Pen redPen = new Pen(Color.Red, 3);
        HatchBrush brush = new HatchBrush(HatchStyle.Cross,
        Color.Red, Color.Yellow);

One important limitation of Web applications is Web browser capability. A Web browser can display only certain objects. For example, all graphics objects in a Web browser will be displayed as images. So before a Web browser can display graphics objects, we need to convert them into images that can be displayed by the browser. Our next step, then, is to create a Bitmap object. The following line creates a 200X200 Bitmap object.

Bitmap curBitmap = new Bitmap (200, 200);

You already know that the Graphics object functions as a canvas and provides members to draw lines, shapes, and images. Now we need to create a Graphics object from the bitmap:

Graphcs g = Graphics.FromImage (curBitmap);

Once we have a Graphics object, we can draw shapes, lines and images. In the following code we use the DrawLine and FillRectangle methods to draw lines and a gilled rectangle:

g.FillRectangle (brush, 50, 50, 100, 100);
g.DrawLine (Pens.WhiteSmoke, 10, 10, 180, 10);
g.DrawLine (Pens.White, 10, 10, 10, 180);

We're almost done. So far we have created Bitmap and Graphics objects, and we have drawn lines and a rectangle. Because a Web browser can display only images (not pixels), we need to convert the bitmap into an image. The Save method of the Bitmap object does the trick for us. The following line is responsible for rendering a bitmap and sending it to the browser:

curBitmap.Save (Response.OutputStream,
ImageFormat.Jpeg);

Finally, we dispose of the Bitmap and Graphics objects:

curBitmap.Dispose();
g.Dispose();

Understanding the Save Method

The Bitmap class is inherited from the Image Class, which defines the Save method. This method saves an image to the specified Stream object in the specified format. For example, in our code the Save method takes the following two arguments: Response.OutputStream and ImageFormat:

curBitmap.Save (Response.OutStream,
ImageFormat.Jpeg);

The Response property of the page class returns the HttpResponse object associated with the page, which allows us to send HTTP response data to the client and contains information about the response. The OutputStream property of HttpResponse enables binary output to the outgoing HTTP content body. In other words, Page.Response.OutputStream sends the images to the browser in a compatible format. The second parameter is of ImageFormat.

The Save method also allows us to save an image on a local physical hard drives. The following code saves the bitmap on the C:\\drive.

curBitmap.Save ("C:\\TempImg.gif",
ImageFormat.Jpeg);