ASP.NET MVC 3 新HTML Helper筆記(3) -- WebImage Class

在ASP.NET MVC 3之前，對於<img />的支援並不多，如果網頁有大量的圖片要處理，通常會自行撰寫「擴充方法」來擴充HtmlHelper型別，而在ASP.NET MVC 3的WebImage類別就是要來補強這方面的不足，而且這個WebImage類別不單單只是產生一個<img />，更提供許多對於「圖片, Image」更全面的操控。

WebImage類別其提供8大功能：

1. 取得圖片
2. 取得WebImage的屬性
3. 圖片的縮放
4. 翻轉
5. 浮水印
6. 裁剪
7. 儲存
8. 輸出

取得圖片

' 上傳中取得圖片
Dim picture1 As WebImage = WebImage.GetImageFromRequest("postedFileName")
' 從String(Path)取得圖片
Dim picture2 As WebImage = New WebImage(Server.MapPath("~/Content/images/kingkong.jpg"))
' 從Stream取得圖片
Dim picture3 As WebImage = New WebImage(System.IO.File.OpenRead(Server.MapPath("~/Content/Images/kingkong.png")))
' 從Byte()取得圖片, 通常是Database，
Dim picture4 As WebImage = New WebImage(picture3.GetBytes())
' 複製取得圖片
Dim picture5 As WebImage = picture2.Clone()

取得WebImage的屬性

' 圖片名稱
picture2.FileName()
' 圖片高度
picture2.Height()
' 圖片格式，例如，JPEG, PNG ...
picture2.ImageFormat()
' 圖片寬度
picture2.Width()

圖片的縮放

picture2.Risize(寬,高,"等比例縮放", "不超過原圖大小")

翻轉

' 水平翻轉
picture2.FlipHorizontal()
' 垂直翻轉
picture2.FlipVertical()
' 左轉90度
picture2.RotateLeft()
' 右轉90度
picture2.RotateRight()

浮水印

' 文字浮水印
' AddTextWatermark("文字", "前景色", "文字大小", "字型樣式", "字型", "水平對齊", "垂直對齊", "透明度",  "邊距")
picture2.AddTextWatermark("KKBruce", "Black", 14, "Sign", "Arial", "Right", "Bottom", 60, 5)

水平對齊：

• Left
• Center
• Right

垂直對齊：

• NotSet (未設定)
• Top
• Middle
• Bottom

透明度：0 (100% 透明, 即看不見)

' 圖片浮水印，差異只有第一個參數
' AddImageWatermark ("路徑", 寬, 高, "水平對齊", "垂直對齊", "透明度", "邊距")
' AddImageWatermark (WebImage , 寬, 高, "水平對齊", "垂直對齊", "透明度", "邊距")
picture2.AddImageWatermark(picture3, 100, 100, "Left", "Top", 50, 5)

裁剪

' Crop(上, 左, 下, 右)，上左下右各要裁剪多少
picture2.Crop(50, 50, 50, 50)

儲存

' Save("路徑", "圖片格式", "是否使用imageFormat格式來儲存")
picture2.Save(Server.MapPath("~/Content/images"), "PNG", False)

輸出

' 把Picture2輸出為image
picture2.Write()

WebImage範例

以下範例修改自http://weblogs.asp.net/gunnarpeipman/archive/2010/10/30/asp-net-mvc-3-building-simple-image-editor-using-webimage-helper.aspx，新增一個指定圖片名稱。

1. 先在預設的 HomeController.vb 中新增一個Sub的Action

Sub GetImage(FileName As String,
             horizontalFlip As String,
             verticalFlip As String,
             rotateLeft As String,
             rotateRight As String)


    Dim FullPath As String = ""
    ' 是否有傳入圖片名稱
    If (Not String.IsNullOrWhiteSpace(FileName)) Then
        FullPath = "~/Content/images/" & FileName
    Else
        FullPath = "~/Content/images/kingkong.jpg"
    End If
    ' 取得圖片路徑
    Dim imagePath As String = Server.MapPath(FullPath)

    ' WebImage物件
    Dim image As WebImage = New WebImage(imagePath)

    ' 是否進行水平翻轉
    If (Not String.IsNullOrWhiteSpace(horizontalFlip)) Then
        image = image.FlipHorizontal()
    End If

    ' 是否進行垂直翻轉
    If (Not String.IsNullOrWhiteSpace(verticalFlip)) Then
        image = image.FlipVertical()
    End If

    ' 是否進行左90度翻轉
    If (Not String.IsNullOrWhiteSpace(rotateLeft)) Then
        image = image.RotateLeft()
    End If

    ' 是否進行右90度翻轉
    If (Not String.IsNullOrWhiteSpace(rotateRight)) Then
        image = image.RotateRight()
    End If

    ' 圖片輸出
    image.Write()
End Sub

在Index.aspx新增以下程式碼

<% Using (Html.BeginForm())%>
        <table border="0" cellpadding="0" cellspacing="5">
        <tr>
        <td valign="top" rowspan="10">
            <img src="/Home/GetImage"  id="image" alt="KingKong" />
        </td>
        <td valign="middle"><input type="checkbox" id="HorizontalFlip" value="1" />
            Flip horizontally</td>
        </tr>
        <tr>
        <td valign="middle"><input type="checkbox" id="VerticalFlip" value="true" />
            Flip vertically</td>
        </tr>
        <tr>
        <td valign="middle"><input type="checkbox" id="RotateLeft" value="true" />
            Rotate left</td>
        </tr>
        <tr>
        <td valign="middle"><input type="checkbox" id="RotateRight" value="true" />
            Rotate right</td>
        </tr>
        <tr>
        <td valign="middle">FileName:<input type="text" id="FileName" value="baby.jpg" /></td>
        </tr>
        <tr>
        <td><input type="button" value="Preview" onclick="updateImage()" /></td>
        </tr>
        </table>
<% End Using%>

引用jQuery，然後新增以下Javascript：

function updateImage() {
    var req = '/Home/GetImage?';
    var query = '';

    if ($('#FileName').val() != null) 
        query += '&FileName=' + $('#FileName').val();
    if ($('#HorizontalFlip').is(':checked'))
        query += '&horizontalFlip=1';
    if ($('#VerticalFlip').is(':checked'))
        query += '&verticalFlip=1';
    if ($('#RotateLeft').is(':checked'))
        query += '&rotateLeft=1';
    if ($('#RotateRight').is(':checked'))
        query += '&rotateRight=1';
        
    req += query.substr(1);
    $('#image').attr("src", req);
}

重點在<img src="/Home/GetImage" id="image" alt="KingKong" />這一行，我們透過jQuery傳入參數，動態改更src屬性，這樣我們就能針你所轉入的檔案名稱，進行對應的動作。例如，<img src="/Home/GetImage?FileName=baby.jpg&verticalFlip=1&rotateRight=1" id="image" alt="KingKong">。