ASP.NET WP - 影像處理

在本節中，我們將討論如何在您的網站上新增和顯示影像。在開發網站時，您可以向網站和各個頁面新增影像。如果影像已存在於您的站點上，則可以使用HTML <img> 標籤在頁面上顯示它。

動態顯示影像

讓我們透過在專案中建立一個名為Images的新資料夾並向其中新增一些影像來了解一個簡單的示例。

現在新增另一個 cshtml 檔案，並將其命名為DynamicImages.cshtml。

單擊“確定”，然後替換DynamicImages.cshtml檔案中的以下程式碼。

@{
   var imagePath = "";
   if (Request["Choice"] != null){ imagePath = "images/" + Request["Choice"]; }
}

<!DOCTYPE html>
<html>
   
   <body>
      <h1>Display Images</h1>
      <form method = "post" action = "">
         I want to see:
         
         <select name = "Choice">
            <option value = "index.jpg">Nature 1</option>
            <option value = "index1.jpg">Nature 2</option>
            <option value = "index2.jpg">Nature 3</option>
         </select>
         
         <input type = "submit" value = "Submit" />
         
         @if (imagePath != ""){
            <p><img src = "@imagePath" alt = "Sample" /></p>
         }
      </form>
   
   </body>
</html>

如您所見，頁面的主體包含一個下拉列表，它是一個<select> 標籤，並命名為Choice。該列表有三個選項，每個列表選項的value屬性都包含已放入images資料夾中的一個影像的名稱。

在上面的程式碼中，該列表允許使用者選擇一個友好的名稱，例如Nature 1，然後在提交頁面時傳遞.jpg 檔名。

在程式碼中，您可以透過讀取Request["Choice"]來獲取使用者從列表中的選擇。首先，它將檢視是否存在任何選擇，然後它將為影像設定一個路徑，該路徑包含影像資料夾的名稱和使用者的影像檔名。

讓我們執行應用程式並指定以下 URLhttps://:36905/DynamicImages，然後您將看到以下輸出。

讓我們單擊“提交”按鈕，您將看到index.jpg檔案載入到頁面上，如下面的螢幕截圖所示。

如果您想從下拉列表中選擇另一張照片，例如Nature 2，則單擊“提交”按鈕，它將更新頁面上的照片。

上傳影像

只有當影像在您的網站上可用時，您才能動態顯示它，但有時您需要顯示不在網站上的影像。因此，您需要先上傳它，然後才能在網頁上顯示該影像。

讓我們瞭解一個簡單的示例，在該示例中我們將上傳影像，首先我們將建立一個新的CSHTML檔案。

在“名稱”欄位中輸入UploadImage.cshtml，然後單擊“確定”。現在讓我們替換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" size = "35"/>
            <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>

讓我們執行此應用程式並指定以下 URL - https://:36905/UploadImage，然後您將看到以下輸出。

要上傳影像，請單擊選擇檔案，然後瀏覽到要上傳的影像。選擇影像後，影像的名稱將顯示在“選擇檔案”按鈕旁邊，如下面的螢幕截圖所示。

如您所見，已選擇images.jpg影像，讓我們單擊“上傳”按鈕以上傳影像。

列印頁面