Zoom.aspx design:
<table>Zoom.aspx code-behind.
<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>
#Region " Properties "ZoomProcessor.aspx code-behind.
'X holds the x coordinate of the
'center of the image
Public Property X() As Integer
Get
Return CInt(viewstate("x"))
End Get
Set(ByVal Value As Integer)
viewstate("x") = Value
End Set
End Property
'Y holds the y coordinate of the
'center of the image
Public Property Y() As Integer
Get
Return CInt(viewstate("y"))
End Get
Set(ByVal Value As Integer)
viewstate("y") = Value
End Set
End Property
'Z holds the Zoom Level
Public Property Z() As Integer
Get
Return CInt(viewstate("Z"))
End Get
Set(ByVal Value As Integer)
If Value < 1 Then Value = 1
viewstate("Z") = Value
End Set
End Property
'ImageWidth holds the original image width
Public Property ImageWidth() As Integer
Get
Return CInt(viewstate("ImageWidth"))
End Get
Set(ByVal Value As Integer)
viewstate("ImageWidth") = Value
End Set
End Property
'ImageHeight hods the original image height
Public Property ImageHeight() As Integer
Get
Return CInt(viewstate("ImageHeight"))
End Get
Set(ByVal Value As Integer)
viewstate("ImageHeight") = Value
End Set
End Property
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As _
System.EventArgs) Handles MyBase.Load
If Not IsPostBack() Then
'On the first page load, we need to know
'the origanal image's size and get the
'center x and y coordinates
Dim i As System.Drawing.Image = _
System.Drawing.Image.FromFile(Server.MapPath("." & _
"\" & "biglogo" & ".jpg"))
ImageWidth = i.Width
ImageHeight = i.Height
X = CInt(ImageWidth / 2)
Y = CInt(ImageHeight / 2)
Z = 1
i.Dispose()
getimage()
End If
End Sub
Private Sub btnMainImage_Click(ByVal sender As System.Object, ByVal e As _
System.Web.UI.ImageClickEventArgs) Handles btnMainImage.Click
If Z = 1 Then
X = e.X
Y = e.Y
Z = 2
Else
X = CInt(hx.Value) - CInt((CInt(ImageWidth / 2) - e.X) / Z)
Y = CInt(hy.Value) - CInt((CInt(ImageHeight / 2) - e.Y) / Z)
End If
getimage()
End Sub
Private Sub btnReset_Click(ByVal sender As System.Object, ByVal e As _
System.Web.UI.ImageClickEventArgs) Handles btnReset.Click
X = CInt(ImageWidth / 2)
Y = CInt(ImageHeight / 2)
Z = 1
getimage()
End Sub
Private Sub btnLeft_Click(ByVal sender As System.Object, ByVal e As _
System.Web.UI.ImageClickEventArgs) Handles btnLeft.Click
X = X - 20
getimage()
End Sub
Private Sub btnRight_Click(ByVal sender As System.Object, ByVal e As _
System.Web.UI.ImageClickEventArgs) Handles btnRight.Click
X = X + 20
getimage()
End Sub
Private Sub btnUp_Click(ByVal sender As System.Object, ByVal e As _
System.Web.UI.ImageClickEventArgs) Handles btnUp.Click
Y = Y - 20
getimage()
End Sub
Private Sub btnDown_Click(ByVal sender As System.Object, ByVal e As _
System.Web.UI.ImageClickEventArgs) Handles btnDown.Click
Y = Y + 20
getimage()
End Sub
Private Sub btnZoom_Click(ByVal sender As System.Object, ByVal e As _
System.Web.UI.ImageClickEventArgs) Handles btnZoom.Click
If Z < 8 Then
Z = Z * 2
End If
getimage()
End Sub
Private Sub btnOut_Click(ByVal sender As System.Object, ByVal e As _
System.Web.UI.ImageClickEventArgs) Handles btnOut.Click
If Z > 1 Then
Z = CInt(Z / 2)
End If
getimage()
End Sub
Private Sub getimage()
Dim ImageName As String = "biglogo"
Dim srcx, srcy As Integer
'Convert X Value to Top Left of image
srcx = X - CInt(CInt(ImageWidth / 2) / Z)
If srcx < 0 Then srcx = 0
If srcx > ImageWidth Then srcx = ImageWidth
'Convert Y value to Top Left of Image
srcy = Y - CInt(CInt(ImageHeight / 2) / Z)
If srcy < 0 Then srcy = 0
If srcy > ImageHeight Then srcy = ImageHeight
'Set the source of the Image to be our Processing aspx page
btnMainImage.ImageUrl = "zoomProcessor.aspx?x=" & srcx & _
"&y=" & srcy & "&z=" & Z & "&img=" & ImageName
hx.Value = X.ToString
hy.Value = Y.ToString
'Enable/disable buttons
If srcx > 0 Then
btnLeft.Enabled = True
Else
btnLeft.Enabled = False
End If
If srcy > 0 Then
btnUp.Enabled = True
Else
btnUp.Enabled = False
End If
If Z = 1 Then
btnOut.Enabled = False
Else
btnOut.Enabled = True
End If
If Z = 8 Then
btnZoom.Enabled = False
Else
btnZoom.Enabled = True
End If
End Sub
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As _
System.EventArgs) Handles MyBase.Load
'Create a new Image object from our source image
Dim i As System.Drawing.Image = _
System.Drawing.Image.FromFile(Server.MapPath("./" _
& Request("img") & ".jpg"))
'Create a workable bitmap image
Dim b As New System.Drawing.Bitmap(CInt(i.Width), _
CInt(i.Height), System.Drawing.Imaging.PixelFormat.Format24bppRgb)
'Place the bitmap image in a Graphics object
Dim g As Graphics = Graphics.FromImage(b)
'Set the default image background color
g.Clear(Color.White)
'Crop the main image
'Get Coordinates and Zoom Values from querystring
Dim x As Integer = CInt(Request("X"))
Dim Y As Integer = CInt(Request("y"))
Dim Z As Integer = CInt(Request("z"))
'Create 2 rectangles. We can grab a rectangle portion
'of the original image and stretch it to fit the size
'of the larger rectangle.
Dim src As New Rectangle()
Dim dst As New Rectangle()
'Set Source rectangle properties
src.X = x
src.Y = Y
src.Width = CInt(i.Width / Z)
src.Height = CInt(i.Height / Z)
'Set Destination rectangle properties
dst.X = 0
dst.Y = 0
dst.Width = CInt(i.Width)
dst.Height = CInt(i.Height)
'Create the image from our rectangles
g.DrawImage(i, dst, src, GraphicsUnit.Pixel)
'Set the content type
Response.ContentType = "image/jpeg"
'Save the image as the Output of this page
b.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg)
'Clean Up
src = Nothing
dst = Nothing
g = Nothing
b = Nothing
i = Nothing
End Sub
以下是英文原文：
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.
Zoom.aspx design:<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>Zoom.aspx code-behind.#Region " Properties " 'X holds the x coordinate of the 'center of the image Public Property X() As Integer Get Return CInt(viewstate("x")) End Get Set(ByVal Value As Integer) viewstate("x") = Value End Set End Property 'Y holds the y coordinate of the 'center of the image Public Property Y() As Integer Get Return CInt(viewstate("y")) End Get Set(ByVal Value As Integer) viewstate("y") = Value End Set End Property 'Z holds the Zoom Level Public Property Z() As Integer Get Return CInt(viewstate("Z")) End Get Set(ByVal Value As Integer) If Value < 1 Then Value = 1 viewstate("Z") = Value End Set End Property 'ImageWidth holds the original image width Public Property ImageWidth() As Integer Get Return CInt(viewstate("ImageWidth")) End Get Set(ByVal Value As Integer) viewstate("ImageWidth") = Value End Set End Property 'ImageHeight hods the original image height Public Property ImageHeight() As Integer Get Return CInt(viewstate("ImageHeight")) End Get Set(ByVal Value As Integer) viewstate("ImageHeight") = Value End Set End Property #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As _ System.EventArgs) Handles MyBase.Load If Not IsPostBack() Then 'On the first page load, we need to know 'the origanal image's size and get the 'center x and y coordinates Dim i As System.Drawing.Image = _ System.Drawing.Image.FromFile(Server.MapPath("." & _ "\" & "biglogo" & ".jpg")) ImageWidth = i.Width ImageHeight = i.Height X = CInt(ImageWidth / 2) Y = CInt(ImageHeight / 2) Z = 1 i.Dispose() getimage() End If End Sub Private Sub btnMainImage_Click(ByVal sender As System.Object, ByVal e As _ System.Web.UI.ImageClickEventArgs) Handles btnMainImage.Click If Z = 1 Then X = e.X Y = e.Y Z = 2 Else X = CInt(hx.Value) - CInt((CInt(ImageWidth / 2) - e.X) / Z) Y = CInt(hy.Value) - CInt((CInt(ImageHeight / 2) - e.Y) / Z) End If getimage() End Sub Private Sub btnReset_Click(ByVal sender As System.Object, ByVal e As _ System.Web.UI.ImageClickEventArgs) Handles btnReset.Click X = CInt(ImageWidth / 2) Y = CInt(ImageHeight / 2) Z = 1 getimage() End Sub Private Sub btnLeft_Click(ByVal sender As System.Object, ByVal e As _ System.Web.UI.ImageClickEventArgs) Handles btnLeft.Click X = X - 20 getimage() End Sub Private Sub btnRight_Click(ByVal sender As System.Object, ByVal e As _ System.Web.UI.ImageClickEventArgs) Handles btnRight.Click X = X + 20 getimage() End Sub Private Sub btnUp_Click(ByVal sender As System.Object, ByVal e As _ System.Web.UI.ImageClickEventArgs) Handles btnUp.Click Y = Y - 20 getimage() End Sub Private Sub btnDown_Click(ByVal sender As System.Object, ByVal e As _ System.Web.UI.ImageClickEventArgs) Handles btnDown.Click Y = Y + 20 getimage() End Sub Private Sub btnZoom_Click(ByVal sender As System.Object, ByVal e As _ System.Web.UI.ImageClickEventArgs) Handles btnZoom.Click If Z < 8 Then Z = Z * 2 End If getimage() End Sub Private Sub btnOut_Click(ByVal sender As System.Object, ByVal e As _ System.Web.UI.ImageClickEventArgs) Handles btnOut.Click If Z > 1 Then Z = CInt(Z / 2) End If getimage() End Sub Private Sub getimage() Dim ImageName As String = "biglogo" Dim srcx, srcy As Integer 'Convert X Value to Top Left of image srcx = X - CInt(CInt(ImageWidth / 2) / Z) If srcx < 0 Then srcx = 0 If srcx > ImageWidth Then srcx = ImageWidth 'Convert Y value to Top Left of Image srcy = Y - CInt(CInt(ImageHeight / 2) / Z) If srcy < 0 Then srcy = 0 If srcy > ImageHeight Then srcy = ImageHeight 'Set the source of the Image to be our Processing aspx page btnMainImage.ImageUrl = "zoomProcessor.aspx?x=" & srcx & _ "&y=" & srcy & "&z=" & Z & "&img=" & ImageName hx.Value = X.ToString hy.Value = Y.ToString 'Enable/disable buttons If srcx > 0 Then btnLeft.Enabled = True Else btnLeft.Enabled = False End If If srcy > 0 Then btnUp.Enabled = True Else btnUp.Enabled = False End If If Z = 1 Then btnOut.Enabled = False Else btnOut.Enabled = True End If If Z = 8 Then btnZoom.Enabled = False Else btnZoom.Enabled = True End If End SubZoomProcessor.aspx code-behind.Private Sub Page_Load(ByVal sender As System.Object, ByVal e As _ System.EventArgs) Handles MyBase.Load 'Create a new Image object from our source image Dim i As System.Drawing.Image = _ System.Drawing.Image.FromFile(Server.MapPath("./" _ & Request("img") & ".jpg")) 'Create a workable bitmap image Dim b As New System.Drawing.Bitmap(CInt(i.Width), _ CInt(i.Height), System.Drawing.Imaging.PixelFormat.Format24bppRgb) 'Place the bitmap image in a Graphics object Dim g As Graphics = Graphics.FromImage(b) 'Set the default image background color g.Clear(Color.White) 'Crop the main image 'Get Coordinates and Zoom Values from querystring Dim x As Integer = CInt(Request("X")) Dim Y As Integer = CInt(Request("y")) Dim Z As Integer = CInt(Request("z")) 'Create 2 rectangles. We can grab a rectangle portion 'of the original image and stretch it to fit the size 'of the larger rectangle. Dim src As New Rectangle() Dim dst As New Rectangle() 'Set Source rectangle properties src.X = x src.Y = Y src.Width = CInt(i.Width / Z) src.Height = CInt(i.Height / Z) 'Set Destination rectangle properties dst.X = 0 dst.Y = 0 dst.Width = CInt(i.Width) dst.Height = CInt(i.Height) 'Create the image from our rectangles g.DrawImage(i, dst, src, GraphicsUnit.Pixel) 'Set the content type Response.ContentType = "image/jpeg" 'Save the image as the Output of this page b.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg) 'Clean Up src = Nothing dst = Nothing g = Nothing b = Nothing i = Nothing End Sub