Browse DevX
Sign up for e-mail newsletters from DevX


Using GDI+ in ASP.NET Web Applications, Part I : Page 2

GDI+ is generally considered a Windows technology. However, some of the new GDI+ features make this technology an excellent choice even for Web applications, enabling developers to generate images, graphs, dynamic buttons, banners, and much more on-the-fly.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Our First Web Example
Start by creating a C# Web application. By default, Visual Studio .NET creates a first Web Form. You cannot use that Web Form to draw on directly because Web Forms are glorified HTML pages that can only do what HTML browsers can interpret. However, you can use the default form to host the drawing example you'll create.

Whatever you create with GDI+ on the Web server will be sent to the client as a bitmap. In fact, the client does not know that the graphic it is about to display is generated on-the-fly using GDI+. Therefore, you can use a simple <IMG> tag to refer to the image. But what is the image's name? Since you'll create the image on-the-fly, the image's name is actually another ASP.NET page. Confused? Just bare with me! Add the following tag to your default Web Form (WebForm1.aspx). To do so, switch to HTML view:

   <img src="Sample1.aspx">
Now, add a new Web Form to your project called "Sample1.aspx." The new form automatically contains some HTML. Since you'll generate an image rather than HTML, you do not want the HTML that was automatically created. Therefore, switch into HTML view and remove the HTML in that file, leaving only the following line in the aspx file (which is required, because it links the aspx file to the code-behind file):

   &lt;%@ Page language="c#"  
      Inherits="GDIPlusArticle.Sample1" %&gt;
In my examples, I use code-behind files for the actual code I'll write. I do this because I think it is cleaner, and also because Visual Studio .NET does so automatically. If you would rather use inline-code (as is the case if you use another editor such as Web Matrix), you can. Where the code resides has no influence on the actual functionality described here.

Right-click on the page and select View Code. The code editor shows some default code. You want the Page_Load event handler method. (Note that, by default, the System.Drawing namespace is included at the very top. In addition, you may want to include the System.Drawing.Imaging namespace to avoid a lot of typing.) The basic idea is that you want to create a blank Bitmap object from scratch, then retrieve a Graphics handle (object) from it, and draw the ellipse on it (see Listing 1).

The Bitmap object is an in-memory image. You generate this image object by creating an instance of the Bitmap class and you then pass the size of the new bitmap as parameters to the constructor.

You retrieve the Graphics object by calling the static FromImage() method on the Graphics class (with the Bitmap object passed as a parameter). Once you have the Graphics object, there is no difference in the drawing code. Drawing on an in-memory bitmap is identical to drawing on a window (or any other GDI+ drawing canvas for that matter). Note that a new bitmap, by default, is all black (all bits are set to 0). Since this most definitely is not the look you're going for, you'll also "clear" the image background by setting the bits to 1 and producing a white background. You didn't have to take this step in the Windows Form version since the default background color was fine (although you can do the same thing if you want to). The rest of the code is identical to the code you used in the Windows Form.

You should next ask, "How do I send the image back to the client?" The answer is: As the current "page." "But," you may say, "ASP.NET pages are HTML pages." This statement is true in most cases because it's the default behavior. In reality you can make an ASP.NET page any type of data. In this case the data type is an image and the image format you'll chose is JPEG. You can change the data type of the aspx page by setting the ContentType property of the Response object to "image/jpeg" (or "image/gif" if you want to send a GIF formatted image). This way the browser that hits the "page" will interpret the returned data as binary image information.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date