Victor Library iconVictor Image Processing Library Application Notes

Creating an ASP.NET Online Image Processing Application

This application note assumes that you have some familiarity with creating online applications with VB.NET and the use of global.asax to maintian session variables. These topics are covered in any introductory ASP.NET text book.

Browsers Display Image Files

Internet server applications are constrained by the limited ability of the browser to display images. To display an image the browser must have an html page that includes an <img> tag that defines the source of the image.

In a simple html page the <img> tag defines the source of the image to be the url of some gif, jpeg, or png file because browsers can only display images that are in those formats.



<img src="http://catenarysystems.com/demos/images/hibiscus.png">

An ASP.NET Page to Process and Display an Image

In ASP.NET we load an image, do some image processing, create the result image on-the-fly in gif, jpeg, or png format, and send it to the browser from an aspx page. The following image is a sharpened version of the hibiscus shown above. It is loaded by an aspx page, processed, then sent to the browser in jpeg format.



<img src="http://catenarysystems.com/demos/sharpen.aspx">


Below is the source code for sharpen.aspx. The sequence is straight forward:

Sharpen.aspx source code

<%@ Page debug="true" %>
<%@ import namespace="System" %> 
<%@ import namespace="System.Net" %> 
<%@ import namespace="viclib" %> 

<html>
<head> 
<title>sharpen</title>
      
<script runat="server">

sub Page_Load
dim ezimage as vicwin.imgdes
dim rcode as integer
dim outbuff as integer
dim imgbytearray as byte()

	' Load an image
	rcode = loadimagefromurl("http://www.catenarysystems.com/demos/simple/hibiscus.png", ezimage)   ' Omitted here for easier reading 
	
	' Do some processing
	rcode = vicwin.sharpen(ezimage, ezimage)
	
	' Save it to a jpg file in memory, quality = 75
	rcode = vicwin.savejpgtobuffer(outbuff, ezimage, 75)
	vicwin.freeimage(ezimage)
	
	' Send the image to the browser
	imgbytearray = buffertobytearray(outbuff) 	' Omitted here for easier reading

	Response.ContentType = "image/jpeg"
	Response.Expires = 0
	Response.Buffer = true
	Response.Clear
	Response.BinaryWrite(imgbytearray)   
	Response.End

end sub

</script>

</head>
<body>
</body>
</html>

The functions sharpen, freeimage, and savejpgtobuffer are contained in the Victor Library and accessed through the viclib namespace.

Separate the Processing from the Display

For the fastest performance of a web-based application we separate the processing from the display.

This demo app selectprocess.html loads the hibiscus image and lets the user apply successive image processing operations. The app has to keep the last processed image in memory so it will be available for the next operation. The global.asax file holds the global variable identifying the image as long as the session is active.

Selectprocess uses an html page as the application's main form to display the user interface and gather data from the user. When the processing is selected the image is processed and displayed by the aspx page in the browser by assignment of the aspx page to the image source: <img src="selectprocess.aspx">.

For the fastest operation of this application only the image is redisplayed, the rest of the page remains unchanged. That's the advantage of using html/css for the user interface.

If the page were built with asp.net controls, then the entire page would be resent from the server to the browser each time the image is processed.




The source code for this app is contained in three main files





Victor Image Processing Library

Victor Image Processing Library homepage

Copyright © 2005- 2008 Catenary Systems Inc. All rights reserved. Victor Image Processing Library is a trademark of Catenary Systems.