Streaming an Image in ASP
This page explains how to stream an image to the browser when it is generated from an ASP script using our csImageFile component. It is an important technique that is not completely obvious at first. There can be complications with passing variables through the application and with debugging and we will address these issues in the next two pages.
In an ordinary web page that displays some text and a single image, there are two files present.
- The HTML file, which contains formatted text and an <img> tag to specify where the image goes and the URL of that image. In an ASP application this page may have a .asp extension but its output has a content type of "text/html".
- The image, which may be a .gif, .jpg, .png or possibly a .bmp.
The address in the browser is that of the HTML page and the browser will automatically request the image as it loads the page and finds the <img> tag.
If we replace the static image file with a dynamically generated image we must replace the URL in the <img> tag with that of the script that produces the image. For example, if we have a web page containing some text and a dynamically generated image, the web page could have the following HTML code:
<body>
<p>Some text above the image</p>
<img src="image.asp">
<p>Some text below the image</p>
</body>
The script "image.asp" uses csImageFile to create an image and it sends a binary data stream preceded with an appropriate MIME type specification so that the browser will treat it as an image. The code for "image.asp" could be:
<%@ language=vbscript %>
<%
Response.Buffer = true
Response.Expires = 0
Response.Clear
Set Image = Server.CreateObject("csImageFile.Manage")
Image.NewImage 200, 200, "FF0000"
Response.ContentType = "image/gif"
Response.BinaryWrite Image.GIFData
%>
The first three lines of code prevent the script from being cached. The csImageFile object is created and called "Image". This example uses the full version of the component, the trial would use Server.CreateObject("csImageFileTrial.Manage"). A new image is created which is simply a red square, 200 pixels across. The last two lines set the ContentType (MIME type) to "image/gif" and send the image to the browser as a block of binary data, which is the image in GIF format.
It is important to note that there is no text or HTML output in this script. There are no Response.Write statements, no HTML tags and there is no attempt to redirect the page after it loads. None of these would be meaningful because the output of the script is a binary data stream containing a single GIF image and nothing else. Any other characters would corrupt the image.
If this script contains an error the server will send an HTML page to show the error message. This cannot be interpreted as an image by the browser so the browser will show an empty image marker. This makes debugging difficult but we will explain more in the next pages.
The StreamToBrowser Method
csImageFile 8.0 introduces the StreamToBrowser method as an alternative to using Response.BinaryWrite. This buffers the output in smaller chunks of data rather than sending the entire image as a single block. This is a more efficient method of streaming large files and prevents the error that can be generated if Response.BinaryWrite is sent a larger amount of data than is specified by the Response buffer size in IIS. StreamToBrowser should be used for large images such as original sized photographs or multipage PDFs, but for smaller images it makes little or no difference.
Example:
Response.ContentType = "image/jpeg"
Image.StreamToBrowser "jpg"
Base64 Encoding - The Base64Out Method
csImageFile 8.2.1 introduces the Base64Out method as an alternative to streaming the image through a separate script. The output is a string which can be placed directly into the <img> tag. It adds about 33% to the size of the output image but it can simplift the application, especially if parameters need to be passed to the image generation script.
Example:
<img src="data:image/jpeg;base64,<%= Image.Base64Out("jpg") %>" />
Base64Out specifies the image format. In this case it is JPG.