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">。

5 則留言:

  1. 請問你在使用 WebImage Resize 後的圖會不會最左邊和最上方會各出現一條灰色的線,如下連結的圖

    https://www.dropbox.com/s/w61nh74amoacxj9/201210240110118698_m.jpg

    回覆刪除
  2. 你是說圖片外框最外面的灰色陰影框嗎?

    回覆刪除
    回覆
    1. 是的,原圖並沒有那個灰色陰影框

      刪除
    2. 是的,你有遇到嗎

      刪除
    3. 由640*480輸出為320*240的結果:http://i.imgur.com/NtcmS.png
      我的原始程式碼:http://i.imgur.com/F9eRG.png

      我輸出的圖片不會有灰色陰影框。你要不要由CSS查起,通常UI都是受CSS影響。

      刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。