在 ASP.NET 网页 (Razor) 网站中使用图像

项目
07/13/2023

本文介绍如何在 ASP.NET 网页 (Razor) ) 网站中添加、显示和操作图像 (调整大小、翻转和添加水印。

学习内容：

如何将图像动态添加到页面。

如何让用户上传图像。

如何调整图像的大小。

如何翻转或旋转图像。

如何向图像添加水印。

如何将图像用作水印。

以下是本文中介绍的 ASP.NET 编程功能：

帮助 WebImage 程序。

对象 Path ，它提供可用于操作路径和文件名的方法。

本教程中使用的软件版本

ASP.NET 网页 (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 ，但稍后将在 article.)
验证这四个图像是否未标记为只读。
将页面中的现有内容替换为以下内容：
```
@{  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 文件夹中的其中一个图像的名称。从本质上讲，列表允许用户选择一个友好名称（如“照片 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 帮助程序，该帮助程序具有处理图像的各种有用方法。具体而言，使用 WebImage.GetImageFromRequest 获取上传的图像 (（如果有任何) ），并将其存储在名为的 photo变量中。

此示例中的大量工作涉及获取和设置文件和路径名称。问题是，你想要获取 (的名称和用户上传的图像的名称) ，然后为要存储图像的位置创建一个新路径。由于用户可能会上传多个具有相同名称的图像，因此使用一些额外的代码来创建唯一名称，并确保用户不会覆盖现有图片。

如果图像实际上已上传 (测试 if (photo != null)) ，则从图像的 FileName 属性获取图像名称。当用户上传图像时， FileName 包含用户的原始名称，其中包括来自用户计算机的路径。它可能如下所示：

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

不过，你并不需要所有这些路径信息，你只需要实际文件名 (SamplePhoto1.jpg) 。可以使用方法仅从路径 Path.GetFileName 中去除文件，如下所示：
```
Path.GetFileName(photo.FileName)
```
然后，通过将 GUID 添加到原始名称来创建一个新的唯一文件名。 (有关 GUID 的详细信息，请参阅本文后面的关于 GUID 。) 然后构造可用于保存映像的完整路径。保存路径由新文件名、文件夹 (图像) 以及当前网站位置组成。

注意

为了使代码将文件保存在 images 文件夹中，应用程序需要该文件夹的读写权限。在开发计算机上，这通常不是问题。但是，将站点发布到托管提供程序的 Web 服务器时，可能需要显式设置这些权限。如果在托管提供程序的服务器上运行此代码并收到错误，检查托管提供程序以了解如何设置这些权限。

最后，将保存路径传递给 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 (全局唯一 ID) 是通常以如下所示的格式呈现的标识符： 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 像素 x 60 像素的图像。此示例演示了如何保留纵横比，以及如何防止图像被放大 (以防新大小实际使图像) 更大。然后，调整大小的图像将保存在 Thumbs 子文件夹中。

在标记结束时，使用与前面示例中看到的动态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>
<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 方法，然后再次保存图像。

通过使用属性设置为 imagePath的元素src，图像再次显示在页面上<img>。

在浏览器中运行页面。 Photo2.jpg的图像是倒置显示的。
刷新页面或再次请求页面，以查看图像再次向右翻转。

若要旋转图像，请使用相同的代码，但不是调用 FlipVertical 或 FlipHorizontal，而是调用 RotateLeft 或 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>
<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中，传递文本“我的水印”，将字体颜色设置为黄色，并将字体系列设置为 Arial。 (虽然此处未显示， WebImage 但帮助程序还允许您指定不透明度、字体系列和字号以及水印 text 的位置。) 保存图像时，它不得为只读。

如前所述，图像通过使用 <img> 将 src 属性设置为 @imagePath的元素显示在页面上。
在浏览器中运行页面。请注意图像右下角的文本“我的水印”。

使用图像作为水印

可以使用其他图像，而不是将文本用于水印。人员有时使用公司徽标等图像作为水印，或者使用水印图像而不是文本作为版权信息。

[屏幕截图显示“使用图像作为水印”页。]

添加名为 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 属性显示图像。

在浏览器中运行页面。请注意，水印图像显示在main图像的底部。

其他资源

在 ASP.NET 网页网站中使用文件

使用 Razor 语法 ASP.NET 网页编程简介

通过

在 ASP.NET 网页 (Razor) 网站中使用图像

本教程中使用的软件版本

向网页动态添加图像

上传图像

关于 GUID

调整图像的大小

旋转和翻转图像

向图像添加水印

使用图像作为水印

其他资源

反馈

其他资源