在 ASP.NET 网页 (Razor) 站点 | Microsoft Learn

动态向网页添加图像

可以在开发网站时将图像添加到网站和各个页面。还可以让用户上传图像，这可能对任务很有用，例如让他们添加个人资料照片。
如果网站中已有图像，并且只想在页面上显示图像，请使用如下所示的 HTML <img> 元素：
<img src="images/Photo1.jpg" alt="Sample Photo" />
不过，有时，你需要能够动态显示图像，也就是说，在页面正在运行之前，你不知道要显示的图像。
本节中的过程演示如何在图像列表中显示图像，用户从图像名称列表中指定图像文件名。 他们从下拉列表中选择图像的名称，并在提交页面时显示他们选择的图像。
在 WebMatrix 中，创建新的网站。
添加名为 DynamicImage.cshtml 的新页面。
在网站的根文件夹中，添加新文件夹并将其命名为 图像。
将四个图像添加到刚刚创建的 映像 文件夹中。  (你方便的任何图像都会执行此操作，但它们应适合页面。) 重命名图像 Photo1.jpg、 Photo2.jpg、 Photo3.jpg和 Photo4.jpg。  (此过程中不会使用 Photo4.jpg ，但稍后将在文章中使用它。) 
验证四个图像是否未标记为只读。
将页面中的现有内容替换为以下内容：
@{  var imagePath= "";
    if( Request["photoChoice"] != null){
        imagePath = @"images\" + Request["photoChoice"];
<!DOCTYPE html>
  <title>Display Image on the Fly</title>
</head>
<h1>Displaying an Image On the Fly</h1>
<form method="post" action="">
        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 style="padding:10px;">
        @if(imagePath != ""){
            <img src="@imagePath" alt="Sample Image" width="300px" />
</form>
</body>
</html>
页面的正文 (名为) photoChoice元素的下拉列表<select>。 该列表有三个选项， value 每个列表选项的属性具有你放入 图像 文件夹中的图像之一的名称。 实质上，该列表允许用户选择友好名称（如“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>
  <title>Image Upload</title>
</head>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Upload Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <input type="submit" value="Upload" />
    </fieldset>
  </form>
  <h1>Uploaded Image</h1>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imagePath" alt="image" />
</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 ”。) 然后构建可用于保存映像的完整路径。 保存路径由新文件名、文件夹 (图像) 和当前网站位置组成。
为了使代码将文件保存在 图像 文件夹中，应用程序需要对该文件夹的读写权限。 在开发计算机上，这通常不是问题。 但是，将站点发布到托管提供商的 Web 服务器时，可能需要显式设置这些权限。 如果在托管提供商的服务器上运行此代码并收到错误，请与托管提供商联系，了解如何设置这些权限。
最后，将保存路径传递给 Save 帮助程序的方法 WebImage 。 这会在其新名称下存储上传的图像。 保存方法如下所示： photo.Save(@"~\" + imagePath) 完整路径将追加到 @"~\"，即当前网站位置。  (有关操作员的信息 ~ ，请参阅 使用 Razor 语法 ASP.NET Web 编程简介。) 
与上一示例中一样，页面正文包含用于 <img> 显示图像的元素。 如果 imagePath 已设置，则 <img> 呈现元素，其 src 属性设置为 imagePath 值。
在浏览器中运行页面。
上传图像并确保该图像显示在页面中。
在网站中，打开 图像 文件夹。 你会看到已添加一个新文件，其文件名如下所示：
45ea4527-7ddd-4965-b9ca-c6444982b342_MyPhoto.png
这是上传的映像，其中包含一个前缀为名称的 GUID。  (你自己的文件将有不同的 GUID，并且可能命名的内容不同于 MyPhoto.png.) 
关于 GUID
GUID (全局唯一 ID) 是通常以如下所示格式呈现的标识符。 936DA01F-9ABD-4d9d-80C7-02AF85C822A8 A-F) 中的数字和字母 (因每个 GUID 而异，但它们都遵循使用 8-4-4-4-4-12 个字符组的模式。  (技术上，GUID 是 16 字节/128 位数字。) 如果需要 GUID，可以调用生成 GUID 的专用代码。 GUID 背后的理念是，在数字的庞大大小 (3.4 x 10³⁸) 和用于生成它的算法之间，生成的数字几乎可以保证为某种类型之一。 因此，当必须确保两次不使用同名时，GUID 是生成事物名称的好方法。 当然，缺点是 GUID 并不特别用户友好，因此在名称仅在代码中使用时，通常会使用它们。
调整图像的大小
如果你的网站接受来自用户的图像，你可能希望在显示或保存图像之前调整图像的大小。 可以再次使用此 WebImage 帮助程序。
此过程演示如何调整上传的图像的大小以创建缩略图，然后在网站中保存缩略图和原始图像。 在页面上显示缩略图，并使用超链接将用户重定向到全尺寸图像。
添加名为 Thumbnail.cshtml 的新页面。
在 图像 文件夹中，创建名为 Thumb 的子文件夹。
将页面中的现有内容替换为以下内容：
    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>
  <title>Resizing Image</title>
</head>
<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" />
      <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
</body>
</html>
此代码类似于上一示例中的代码。 区别在于，此代码将图像保存两次，一次是正常保存一次，一次是在创建图像的缩略图副本之后保存一次。 首先，获取上传的图像并将其保存在 图像 文件夹中。 然后，为缩略图构造一个新路径。 若要实际创建缩略图，请调用 WebImage 帮助程序 Resize 的方法，以按 60 像素图像创建 60 像素。 该示例演示如何保留纵横比，以及如何防止图像 (放大，以防新大小实际上会使图像变大) 。 然后，重设大小的图像将保存在 拇指 子文件夹中。
在标记的末尾，将同一元素与前面示例中看到的动态src属性一起使用<img>，以有条件地显示图像。 在这种情况下，将显示缩略图。 还可以使用 <a> 元素创建指向映像大版本的超链接。 与src元素的属性一样，将元素的属性<img><a>动态设置为href任何元素中的imagePath属性。 若要确保路径可以用作 URL，请传递给imagePathHtml.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>
  <title>Get Image From File</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<h1>Flip Image Vertically</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
</body>
</html>
该代码使用 WebImage 帮助程序从服务器获取映像。 使用前面示例中用于保存图像的相同技术创建映像的路径，并在使用 WebImage以下命令创建映像时传递该路径：
WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
如果找到图像，则构建一个新的路径和文件名，就像前面示例中所做的那样。 若要翻转图像，请调用 FlipVertical 该方法，然后再次保存图像。
通过使用属性设置为imagePath的元素src，该图像再次显示在页面上<img>。
在浏览器中运行页面。 Photo2.jpg的图像显示为倒置。
刷新页面或再次请求页面以查看图像再次向右翻转。
若要旋转图像，请使用相同的代码，但不是调用FlipVertical或调用RotateLeft或FlipHorizontal调用RotateRight。
向图像添加水印
将图像添加到网站时，可能需要先向图像添加水印，然后再将其保存或显示在页面上。 人们经常使用水印将版权信息添加到图像或宣传其业务名称。
添加名为 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>
  <title>Water Mark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<h1>Adding a Watermark to an Image</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
</body>
</html>
此代码类似于上一 (的 FlipImage.cshtml 页面中的代码，尽管这次它使用 Photo3.jpg 文件) 。 若要添加水印，请在保存图像之前调用 WebImage 帮助程序 AddTextWatermark 的方法。 在调用 AddTextWatermark中，传递文本“我的水印”，将字体颜色设置为黄色，并将字体系列设置为 Arial。  (虽然此处未显示， WebImage 但帮助程序还允许您指定不透明度、字体系列和字号以及水印文本的位置。) 保存图像时，它不得为只读。
如前所述，图像通过使用设置为 src 属性@imagePath的元素显示在页面上<img>。
在浏览器中运行页面。 请注意图像右下角的文本“我的水印”。
使用图像作为水印
可以使用另一个图像，而不是对水印使用文本。 人们有时使用公司徽标等图像作为水印，或者使用水印图像而不是文本获取版权信息。
添加名为 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>
  <title>Image Watermark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
  <h1>Using an Image as a Watermark</h1>
  @if(imagePath != ""){
    <div class="result">
      <img src="@imagePath" alt="Image" />
</body>
</html>
这是前面示例中代码的另一个变体。 在这种情况下，在保存图像之前，调用 AddImageWatermark 将水印图像添加到目标映像  (Photo3.jpg)  。 调用 AddImageWatermark时，将宽度设置为 80 像素，高度设置为 20 像素。 MyCompanyLogo.jpg图像在中心水平对齐，并在目标图像底部垂直对齐。 不透明度设置为 100%，填充设置为 10 像素。 如果水印图像大于目标图像，则不会发生任何操作。 如果水印图像大于目标图像，并且将图像水印的填充设置为零，则忽略水印。
如前所述，使用 <img> 元素和动态 src 属性显示图像。
在浏览器中运行页面。 请注意，水印图像显示在主图像底部。
在 ASP.NET 网页网站中使用文件
使用 Razor 语法 ASP.NET 网页编程简介