ASP.NET中圖象操作與縮放

ASP.NET中圖象操作與縮放

原文：ASP.NET Image Manipulation and Zoom
作者：不詳    翻譯：YuL

這裡需要兩個ASP.NET頁面：Zoom.aspx和ZoomProcessor.aspx。ZoomProcessor.aspx用於實際的圖片操
作。這個頁面輸出的不是HTML，而是圖象。這個輸出圖象就作為Zoom.aspx的圖象源，然後在Zoom.aspx頁面通過按鈕控制項來縮放、漫遊和顯
示圖象。通過下面的內容，將向你介紹功能及其細節。你可能還會注意到重畫圖象的用時會更長一些。這主要是因為圖象是在伺服器端被建立的。如果我們把圖象放
到一個稍小一點的視窗裡，而且這個視窗沒有HTML在它的下面或右邊，那麼我們也許就會把注意力轉移到其它地方了。

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 Sub

ZoomProcessor.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