Dynamically Generate Images in Web Pages

Submitted on: 1/1/2015 1:18:00 AM
By: Pankaj Nagar (from psc cd)  
Level: Beginner
User Rating: By 8 Users
Compatibility: ASP.NET
Views: 2633
     The .NET Framework includes a rich set of classes for generating images. You can use these classes to generate images in a variety of different formats, such as GIF, JPEG, TIFF, PNG, and BMP. You can also use these classes to draw complex shapes, including arcs, polygons, and Bezier curves.


New Page 1

If you want to dynamically generate an image and display the image in a Web Page, then you actually need to create two ASP.NET pages. You create one page that generates the byte data for the actual image. This page is then displayed in a second page, the display page, with an HTML <img>  tag.
This example creates a pair of pages that displays a red circle. We'll generate a GIF image for the circle in an ASP.NET page named Circle.aspx.

1. Circle.aspx

<%@ 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
' Create Bitmap
objBitmap = New Bitmap( 200, 200 )
' Initialize Graphics Class
objGraphics = Graphics.FromImage( objBitmap )
objGraphics.FillEllipse( Brushes.Red, 0, 0, 200, 200 )
' Display Bitmap
objBitmap.Save( Response.OutputStream, ImageFormat.Gif )
End Sub

The purpose of the ContentType directive that appears at the very top of the page is to actually pretend that ASP .NET page to be a GIF image. When the page is requested, the ContentType directive tells the Web browser that it should expect a GIF image instead of a normal HTML page.
Normally you will need to open the page in a second page to use it effectively in a web page.
The second page contains an HTML <img> tag that loads the above page. This page contains normal HTML content that appears around the image.

2. DisplayCircle.aspx

<h1>Here is an image:</h1>
<img src="Circle.aspx">
<h1>The image appears above!<h1>

The Web browser treats the Circle.aspx page as a normal GIF image. It has no idea that the image was dynamically generated in an ASP.NET page.

Other 8 submission(s) by this author


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Beginner category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)

Other User Comments

 There are no comments on this submission.

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular article, please click here instead.)

To post feedback, first please login.