Victor Image Processing Library Application Notes
Victor Image Processing Library Application Notes
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.
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.
Below is the source code for sharpen.aspx. The sequence is straight forward:
<%@ 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.
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Selectprocess, a Victor Library demo using asp.net, VB.NET</title>
<style>
body { font: 78%/1.5 arial, helvetica, serif }
.submit-button { width: 10em; color: #000 }
.display_box { margin-left: 1em }
.button_block { float: left; width: 11em }
</style>
</head>
<body>
<h3>ASP.NET Victor Image Processing Library Demo, VB.NET</h3>
<span class="button_block">
<input type="button" class="submit-button" id="refresh" onclick="selectprocess(this);" value="Refresh" />
<input type="button" class="submit-button" id="sharpen" onclick="selectprocess(this);" value="Sharpen" /><br />
<input type="button" class="submit-button" id="negative" onclick="selectprocess(this);" value="Negative" /><br />
<input type="button" class="submit-button" id="togray" onclick="selectprocess(this);" value="Convert to grayscale" /><br />
<input type="button" class="submit-button" id="kodalith" onclick="selectprocess(this);" value="Kodalith" /><br />
<input type="button" class="submit-button" id="flip" onclick="selectprocess(this);" value="Flip" /><br />
<input type="button" class="submit-button" id="mirror" onclick="selectprocess(this);" value="Mirror" /><br />
<input type="button" class="submit-button" id="reload" onclick="selectprocess(this);" value="Reload" /><br />
</span>
<span class="display_box">
<img src="selectprocess.aspx?category=process1&func=refresh&id=image1" id="image1" alt="Source image" />
</span>
<script language=javascript>
function selectprocess(sourceObject)
{
var nimage;
var func = sourceObject.id;
var anow;
anow = new Date(); // to tack on a random number so to the browser it is a new url
nimage = document.getElementById("image1");
nimage.src = "selectprocess.aspx?category=process1"
+ "&func=" + func
+ "&xtr=" + anow;
}
</script>
</body>
</html>
If (rcode = vicwin.NO_ERROR) Then ' Set the global variables
Session("sp_imgdes") = srcimg ' Image descriptor
Session("sp_sessionflag") = 1 ' Flag to indicate session is active
rcode = vicwin.savejpgtobuffer(outbuff, srcimg, 75) ' Save image to a jpg file in memory, quality = 75
If rcode = vicwin.NO_ERROR Then
imgbytearray = buffertobytearray(outbuff) ' Omitted here for easier reading
vicwin.freebuffer(outbuff)
Response.ContentType = "image/jpeg"
Response.Expires = 0
Response.Buffer = True
Response.Clear()
Response.BinaryWrite(imgbytearray) ' Send the image to the browser
Response.End()
End If
End If
Selectprocess.aspx complete source code
<%@ import namespace="viclib" %>
<Script Runat="server">
Sub Session_Start()
Session("sp_imgdes") = 0
Session("sp_sessionflag") = 0
End Sub
' When the app ends, release the image buffer memory
Sub Session_OnEnd()
Dim simage As vicwin.imgdes
simage = New vicwin.imgdes()
if Session("sp_sessionflag") = 1 then
simage = Session("sp_imgdes")
vicwin.freeimage(simage)
Session("sp_sessionflag") = 0
end if
End Sub
</script>
