在 ASP.NET Web Pages (Razor) 網站中使用映射

發行項
07/13/2023

本文說明如何在 ASP.NET Web Pages (Razor) 網站中新增、顯示及操作影像， (調整大小、翻轉及新增水) 印。

您將學到什麼：

如何動態將影像新增至頁面。

如何讓使用者上傳影像。

如何調整影像大小。

如何翻轉或旋轉影像。

如何將浮水印新增至影像。

如何使用影像作為浮水印。

以下是文章仲介紹的 ASP.NET 程式設計功能：

協助 WebImage 程式。

Path物件，提供可讓您操作路徑和檔案名的方法。

教學課程中使用的軟體版本

ASP.NET Web Pages (Razor) 2

WebMatrix 2

本教學課程也適用于 WebMatrix 3。

動態將影像新增至網頁

您可以在開發網站時，將影像新增至您的網站和個別頁面。您也可以讓使用者上傳影像，這在工作上可能很有用，例如讓他們新增設定檔相片。

如果您的網站上已有影像可用，而您只想在頁面上顯示影像，您可以使用如下所示的 HTML <img> 元素：

<img src="images/Photo1.jpg" alt="Sample Photo" />

不過，有時候，您必須能夠動態顯示影像，也就是說，在頁面執行之前，您不知道要顯示的影像。

本節中的程式示範如何即時顯示影像，讓使用者從影像名稱清單中指定影像檔案名。他們會從下拉式清單中選取影像的名稱，並在提交頁面時顯示他們選取的影像。

[螢幕擷取畫面顯示從下拉式清單選取之後所顯示的影像。

在 WebMatrix 中，建立新的網站。
新增名為 DynamicImage.cshtml的新頁面。
在網站的根資料夾中，新增資料夾並將其命名為影像。
將四個影像新增至您剛才建立的 images 資料夾。 (您方便使用的任何影像，但應該符合頁面。) 重新命名影像 Photo1.jpg、 Photo2.jpg、 Photo3.jpg和 Photo4.jpg。 (您將不會在此程式中使用 Photo4.jpg ，但您將在本文稍後使用。)
確認四個影像未標示為唯讀。
以下列內容取代頁面中的現有內容：
```
@{  var imagePath= "";
    if( Request["photoChoice"] != null){
        imagePath = @"images\" + Request["photoChoice"];
   }
}
<!DOCTYPE html>
<html>
<head>
  <title>Display Image on the Fly</title>
</head>
<body>
<h1>Displaying an Image On the Fly</h1>
<form method="post" action="">
    <div>
        I want to see:
        <select name="photoChoice">
            <option value="Photo1.jpg">Photo 1</option>
            <option value="Photo2.jpg">Photo 2</option>
            <option value="Photo3.jpg">Photo 3</option>
        </select>
        &nbsp;
        <input type="submit" value="Submit" />
    </div>
    <div style="padding:10px;">
        @if(imagePath != ""){
            <img src="@imagePath" alt="Sample Image" width="300px" />
        }
    </div>
</form>
</body>
</html>
```
頁面的本文具有下拉式清單， <select> (名為 photoChoice 的專案) 。清單有三個選項，而 value 每個清單選項的屬性都有您在 images 資料夾中放置的其中一個影像名稱。基本上，清單可讓使用者選取類似「Photo 1」的易記名稱，然後在提交頁面時傳遞 .jpg 檔案名。

在程式碼中，您可以藉由讀取 Request["photoChoice"] 來取得使用者的選取範圍 (，也就是從清單中) 影像檔案名。您首先會看到是否有選取範圍。如果有的話，您可以建構映射的路徑，其中包含影像資料夾的名稱和使用者的映射檔案名。 (如果您嘗試建構路徑但中 Request["photoChoice"] 沒有任何內容，則會收到錯誤。) 這會導致相對路徑如下：

images/Photo1.jpg

路徑會儲存在名為 imagePath 的變數中，稍後您將需要在頁面中使用。

在本文中，還有一個 <img> 元素可用來顯示使用者挑選的影像。屬性 src 不會設定為檔案名或 URL，就像您要顯示靜態元素一樣。相反地，它會設定為 @imagePath ，這表示它會從您在程式碼中設定的路徑取得其值。

不過，第一次執行頁面時，不會顯示任何影像，因為使用者尚未選取任何專案。這通常表示 src 屬性會是空的，而且影像會顯示為紅色「x」 (或瀏覽器在找不到影像時呈現的任何內容) 。若要避免這種情況，您會將 <img> 元素放在測試的區塊中 if ，以查看變數是否有 imagePath 任何專案。如果使用者已選取， imagePath 則包含路徑。如果使用者未挑選影像，或這是第一次顯示頁面時， <img> 則專案甚至不會轉譯。
儲存檔案，並在瀏覽器中執行頁面。 (執行頁面之前，請先確定已在 [ 檔案 ] 工作區中選取頁面。)
從下拉式清單中選取影像，然後按一下 [範例影像]。請確定您看到不同選項的不同影像。

上傳影像

上一個範例示範如何動態顯示影像，但它只適用于您網站上已有的影像。此程式示範如何讓使用者上傳影像，然後顯示在頁面上。在 ASP.NET 中，您可以使用協助程式即時 WebImage 操作影像，其具有可讓您建立、操作及儲存影像的方法。協助 WebImage 程式支援所有常見的 Web 映射檔案類型，包括 .jpg、 .png和 .bmp。在本文中，您將使用 .jpg 影像，但您可以使用任何影像類型。

[顯示 [上傳影像] 頁面的螢幕擷取畫面。

新增頁面，並將其命名為 UploadImage.cshtml。
以下列內容取代頁面中的現有內容：
```
@{  WebImage photo = null;
    var newFileName = "";
    var imagePath = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
            newFileName = Guid.NewGuid().ToString() + "_" +
                Path.GetFileName(photo.FileName);
            imagePath = @"images\" + newFileName;

            photo.Save(@"~\" + imagePath);
        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Upload</title>
</head>
<body>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Upload Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Upload" />
    </fieldset>
  </form>
  <h1>Uploaded Image</h1>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imagePath" alt="image" />

    </div>
    }
</body>
</html>
```
文字本文具有 <input type="file"> 元素，可讓使用者選取要上傳的檔案。當他們按一下 [ 提交] 時，所挑選的檔案會連同表單一起提交。

若要取得上傳的影像，您可以使用 WebImage 協助程式，其具有各種實用的方法來處理影像。具體而言，如果有任何) 並將它儲存在名為 photo 的變數中，您就會使用 WebImage.GetImageFromRequest 來取得上傳的影像 (。

此範例中有許多工作牽涉到取得和設定檔案和路徑名稱。問題在於您想要取得名稱 (，而只是使用者上傳之影像的名稱) ，然後為您要儲存映射的位置建立新的路徑。因為使用者可能會上傳多個具有相同名稱的影像，所以您可以使用一些額外的程式碼來建立唯一的名稱，並確定使用者不會覆寫現有的圖片。

如果實際上傳影像 (測試 if (photo != null)) ，您會從影像的屬性取得影像 FileName 名稱。當使用者上傳影像時， FileName 會包含使用者的原始名稱，其中包含使用者電腦的路徑。如下所示：

C:\Users\Joe\Pictures\SamplePhoto1.jpg

不過，您不想要所有路徑資訊，只是想要實際檔案名 (SamplePhoto1.jpg) 。您可以使用方法從路徑 Path.GetFileName 中移除檔案，如下所示：
```
Path.GetFileName(photo.FileName)
```
然後，您將 GUID 新增至原始名稱，以建立新的唯一檔案名。 (如需 GUID 的詳細資訊，請參閱本文稍後的關於 GUID 。) 然後建構可用來儲存映射的完整路徑。儲存路徑是由新檔案名、資料夾 (影像) 和目前網站位置所組成。

注意

為了讓程式碼將檔案儲存在 images 資料夾中，應用程式需要該資料夾的讀寫許可權。在您的開發電腦上，這通常不是問題。不過，當您將網站發佈至主機提供者的網頁伺服器時，您可能需要明確設定這些許可權。如果您在主控提供者的伺服器上執行此程式碼並收到錯誤，請洽詢主機提供者以瞭解如何設定這些許可權。

最後，您會將儲存路徑傳遞至 Save 協助程式的方法 WebImage 。這會在其新名稱下儲存上傳的影像。儲存方法看起來像這樣： photo.Save(@"~\" + imagePath) 。完整路徑會附加至 @"~\" ，這是目前的網站位置。 (如需運算子的相關資訊 ~ ，請參閱使用 Razor 語法 ASP.NET Web 程式設計簡介。)

如上一個範例所示，頁面本文包含 <img> 顯示影像的專案。如果 imagePath 已設定，則會 <img> 轉譯專案，且其 src 屬性會設定為 imagePath 值。
在瀏覽器中執行頁面。
上傳影像，並確定影像顯示在頁面中。
在您的網站中，開啟 images 資料夾。您會看到新檔案已新增，其檔案名看起來如下：：

45ea4527-7ddd-4965-b9ca-c6444982b342_MyPhoto.png

這是您在名稱前面加上 GUID 上傳的影像。 (您自己的檔案會有不同的 GUID，且名稱可能不同于 MyPhoto.png.)

提示

關於 GUID

GUID (全域唯一識別碼) 是識別碼，通常以如下所示的格式呈現： 936DA01F-9ABD-4d9d-80C7-02AF85C822A8 。每個 GUID 的 A-F) 數位和字母 (不同，但它們全都遵循使用 8-4-4-4-12 字元群組的模式。 (技術上來說，GUID 是 16 位元組/128 位數位。) 當您需要 GUID 時，您可以呼叫產生 GUID 的特殊程式碼。 GUID 背後的概念是，在大量數位 (3.4 x 10³⁸) 和產生它的演算法之間，產生的數位幾乎保證為其中一種。因此，當您必須保證不會使用相同的名稱兩次時，GUID 是產生專案名稱的好方法。當然，缺點是 GUID 並不特別方便使用者，因此在名稱只用于程式碼時，通常會使用它們。

調整影像大小

如果您的網站接受來自使用者的影像，您可能會想要在顯示或儲存影像之前調整影像大小。您可以再次使用此 WebImage 協助程式。

此程式示範如何調整已上傳影像的大小，以建立縮圖，然後將縮圖和原始影像儲存在網站中。您會在頁面上顯示縮圖，並使用超連結將使用者重新導向至完整大小的影像。

[顯示縮圖影像頁面的螢幕擷取畫面。]

新增名為 Thumbnail.cshtml的新頁面。
在 images 資料夾中，建立名為 thumbs 的子資料夾。

以下列內容取代頁面中的現有內容：

@{  
    WebImage photo = null;
    var newFileName = "";
    var imagePath = "";
    var imageThumbPath  = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
             newFileName = Guid.NewGuid().ToString() + "_" +
                 Path.GetFileName(photo.FileName);
             imagePath = @"images\" + newFileName;
             photo.Save(@"~\" + imagePath);

            imageThumbPath = @"images\thumbs\" + newFileName;
            photo.Resize(width: 60, height: 60, preserveAspectRatio: true,
               preventEnlarge: true);
            photo.Save(@"~\" + imageThumbPath);        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Resizing Image</title>
</head>
<body>
<h1>Thumbnail Image</h1>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Creating Thumbnail Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Submit" />
    </fieldset>
  </form>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imageThumbPath" alt="Thumbnail image" />
        <a href="@Html.AttributeEncode(imagePath)" target="_Self">
            View full size
        </a>
    </div>

    }
</body>
</html>

此程式碼類似于上一個範例中的程式碼。差別在於，此程式碼會儲存影像兩次，一般一次，一次，一次在您建立影像的縮圖複本之後。首先，您會取得上傳的影像，並將它儲存在 images 資料夾中。然後，您可以建構縮圖影像的新路徑。若要實際建立縮圖，您可以呼叫 WebImage 協助程式 Resize 的方法，以建立 60 圖元的 60 圖元影像。此範例示範如何保留外觀比例，以及如何防止影像放大 (，以防新的大小實際使影像變大) 。然後，調整大小的影像會儲存在 Thumbs 子資料夾中。

在標記結尾，您可以使用與先前範例中所見的動態 src 屬性相同的 <img> 元素，以有條件地顯示影像。在此情況下，您會顯示縮圖。您也可以使用 <a> 元素來建立大型映射版本的超連結。如同專案的 src 屬性 <img> ，您可以動態將專案的 <a> 屬性設定 href 為中的 imagePath 任何專案。若要確定路徑可以做為 URL 運作，您可以傳遞 imagePath 至 Html.AttributeEncode 方法，以將路徑中的保留字元轉換成 URL 中確定的字元。

在瀏覽器中執行頁面。
上傳相片並確認縮圖已顯示。
按一下縮圖以查看完整大小的影像。
在影像和 影像/指紋中，請注意，已新增新的檔案。

旋轉和翻轉影像

協助 WebImage 程式也可讓您翻轉和旋轉影像。此程式示範如何從伺服器取得影像、垂直翻轉影像 (垂直) 、儲存影像，然後在頁面上顯示翻轉的影像。在此範例中，您只是使用伺服器上已有的檔案， (Photo2.jpg) 。在實際的應用程式中，您可能會翻轉動態取得名稱的影像，就像您在先前的範例中所做的一樣。

[顯示翻轉影像垂直頁面的螢幕擷取畫面。]

新增名為 FlipImage.cshtml的新頁面。

以下列內容取代頁面中的現有內容：

@{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
    if(photo != null){
        imagePath = @"images\Photo2.jpg";
        photo.FlipVertical();
        photo.Save(@"~\" + imagePath);
     }
}
<!DOCTYPE html>
<html>
<head>
  <title>Get Image From File</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Flip Image Vertically</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
  </div>
}
</body>
</html>

此程式碼會 WebImage 使用協助程式從伺服器取得映射。您可以使用先前範例中用來儲存影像的相同技巧來建立映射的路徑，並在您使用建立映射 WebImage 時傳遞該路徑：

WebImage photo = new WebImage(@"~\Images\Photo2.jpg");

如果找到映射，您可以建構新的路徑和檔案名，就像您在先前的範例中所做的一樣。若要翻轉影像，請呼叫 FlipVertical 方法，然後再次儲存影像。

影像會再次顯示于頁面上， <img> 方法是使用屬性設定為 imagePath 的 src 元素。

在瀏覽器中執行頁面。 Photo2.jpg的影像會往上顯示。
重新整理頁面或再次要求頁面，以查看影像正向右翻轉。

若要旋轉影像，您可以使用相同的程式碼，不同之處在于您呼叫或，而不是呼叫 FlipVerticalRotateLeft 或 FlipHorizontalRotateRight 。

將浮水印新增至影像

當您將影像新增至您的網站時，建議您在儲存影像或將其顯示在頁面上之前，先將浮水印新增至影像。人員通常會使用浮水印，將著作權資訊新增至影像或公告其商務名稱。

[顯示 [將浮水印新增至影像] 頁面的螢幕擷取畫面。

新增名為 Watermark.cshtml的新頁面。
以下列內容取代頁面中的現有內容：
```
@{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo3.jpg");
    if(photo != null){
        imagePath = @"images\Photo3.jpg";
        photo.AddTextWatermark("My Watermark", fontColor:"Yellow", fontFamily:
            "Arial");
        photo.Save(@"~\" + imagePath);    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Water Mark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Adding a Watermark to an Image</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
  </div>
}
</body>
</html>
```
此程式碼就像先前 (FlipImage.cshtml 頁面中的程式碼，但這次會使用 Photo3.jpg 檔案) 。若要新增浮水印，請先呼叫 WebImage 協助程式的 AddTextWatermark 方法，再儲存影像。在的呼叫 AddTextWatermark 中，您會傳遞文字「My Watermark」、將字型色彩設定為黃色，並將字型系列設定為 Arial。 (雖然此處未顯示， WebImage 但協助程式也可讓您指定不透明度、字型系列和字型大小，以及浮水印 text 的位置。) 儲存影像時，不得為唯讀。

如您先前所見，影像會顯示在頁面上，方法是使用 <img> 設定為的 src 屬性 @imagePath 的專案。
在瀏覽器中執行頁面。請注意影像右下角的文字「My Watermark」。

使用影像作為浮水印

您可以使用另一個影像，而不是使用浮水印的文字。人員有時會使用公司標誌之類的影像作為浮水印，或使用浮水印影像而非文字來取得著作權資訊。

[螢幕擷取畫面顯示使用影像作為浮水印頁面。]

新增名為 ImageWatermark.cshtml的新頁面。
將影像新增至 影像資料夾， 以作為標誌使用，並將影像 重新命名MyCompanyLogo.jpg。此影像應該是一個影像，當影像設定為 80 圖元寬且高度為 20 圖元時，即可清楚看到。

以下列內容取代頁面中的現有內容：

@{  var imagePath = "";
   WebImage WatermarkPhoto = new WebImage(@"~\" +
        @"\Images\MyCompanyLogo.jpg");
    WebImage photo = new WebImage(@"~\Images\Photo4.jpg");
    if(photo != null){
        imagePath = @"images\Photo4.jpg";
        photo.AddImageWatermark(WatermarkPhoto, width: 80, height: 20,
           horizontalAlign:"Center", verticalAlign:"Bottom",
           opacity:100,  padding:10);
      photo.Save(@"~\" + imagePath);
   }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Watermark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
  <h1>Using an Image as a Watermark</h1>
  @if(imagePath != ""){
    <div class="result">
      <img src="@imagePath" alt="Image" />
    </div>
  }
</body>
</html>

這是先前範例程式碼的另一個變化。在此情況下，您會呼叫 AddImageWatermark 將浮水印影像新增至目標映射， (Photo3.jpg) ，再儲存映射。當您呼叫 AddImageWatermark 時，您會將其寬度設定為 80 圖元，並將高度設定為 20 圖元。 MyCompanyLogo.jpg影像會水準對齊中央，並垂直對齊目標影像底部。不透明度設定為 100%，而邊框間距設定為 10 圖元。如果浮水印影像大於目標影像，則不會發生任何動作。如果浮水印影像大於目標影像，而且您已將影像浮水印的邊框間距設定為零，則會忽略浮水印。

如同之前，您會使用 <img> 元素和動態 src 屬性來顯示影像。

在瀏覽器中執行頁面。請注意，浮水印影像會出現在主要影像底部。

其他資源

在 ASP.NET Web Pages網站中使用檔案

使用 Razor 語法 ASP.NET Web Pages程式設計簡介

在 ASP.NET Web Pages (Razor) 網站中使用映射

教學課程中使用的軟體版本

動態將影像新增至網頁

上傳影像

關於 GUID

調整影像大小

旋轉和翻轉影像

將浮水印新增至影像

使用影像作為浮水印

其他資源

意見反應

意見反應

其他資源