ASP.NET Image Manipulation and Zoom

This example requires two ASP.Net pages: Zoom.aspx and ZoomProcessor.aspx. ZoomProcessor is used to do the actual image processing. The output of that page is not html, but an image. That page will be the source for the image on Zoom.aspx, which will be used to hold the buttons to control zooming and panning and display the image. View the inline comments for specific code functionality and detail. You'll notice that it takes just a bit longer for the image to be created than the rest of the page. This is expected as the image is created dynamically by the server. If we were to place the image in a smaller window with no html below or to the right of it, this would be less noticeable.

<table>
    <tr>
        <td vAlign="top">
            <table>
                <tr>
                    <td></td>
                    <td><asp:imagebutton id="btnUp" runat="server" ImageUrl="Up.jpg" 
                    AlternateText="Up"></asp:imagebutton></td>
                    <TD></TD>
                </tr>
                <tr>
                    <td><asp:imagebutton id="btnLeft" runat="server" ImageUrl="left.jpg" 
                    AlternateText="Left"></asp:imagebutton></td>
                    <td><asp:imagebutton id="btnReset" runat="server" imageurl="reset.jpg">
                    </asp:imagebutton></td>
                    <TD><asp:imagebutton id="btnRight" runat="server" ImageUrl="right.jpg" 
                    AlternateText="Right"></asp:imagebutton></TD>
                </tr>
                <tr>
                    <td></td>
                    <td><asp:imagebutton id="btnDown" runat="server" ImageUrl="down.jpg" 
                    AlternateText="Down"></asp:imagebutton></td>
                    <TD></TD>
                </tr>
                <tr>
                    <td><asp:imagebutton id="btnOut" runat="server" ImageUrl="out.jpg" 
                    AlternateText="Out"></asp:imagebutton></td>
                    <td></td>
                    <td><asp:imagebutton id="btnZoom" runat="server" ImageUrl="in.jpg" 
                    AlternateText="In"></asp:imagebutton></td>
                </tr>
            </table>
            <input id="hx" type="hidden" runat="server" NAME="hx"><input id="hy" 
            type="hidden" runat="server" NAME="hy">
        </td>
        <td><asp:imagebutton id="btnMainImage" runat="server" ImageUrl="">
        </asp:imagebutton></td>
    </tr>
</table>