作者 Tom FitzMacken

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

学习内容：

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

如何让用户上传图像。

如何调整图像的大小。

如何翻转或旋转图像。

如何向图像添加水印。

如何将图像用作水印。

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

帮助 WebImage 程序。

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

本教程中使用的软件版本

ASP.NET 网页 (Razor) 2

WebMatrix 2

本教程还适用于 WebMatrix 3。

向网页动态添加图像

在开发网站时，可以将图像添加到网站和各个页面。 还可以让用户上传图像，这对于让他们添加个人资料照片等任务可能很有用。

如果网站上已提供某个图像，而你只想将其显示在页面上，请使用如下所示的 HTML 元素：

不过，有时需要能够动态显示图像，也就是说，在页面运行之前，你不知道要显示什么图像。

本部分中的过程演示如何在用户从图像名称列表中指定图像文件名的位置动态显示图像。 他们从下拉列表中选择图像的名称，提交页面时，将显示所选图像。

在 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"];

}

}

Displaying an Image On the Fly

页面正文有一个下拉列表， ( 名为 photoChoice的元素) 。 该列表有三个选项， value 每个列表选项的 属性具有你放入 images 文件夹中的其中一个 图像 的名称。 从本质上讲，列表允许用户选择一个友好名称（如“照片 1”），然后在提交页面时传递 .jpg 文件名。

在代码中，你可以获取用户选择 (换句话说，通过读取 Request["photoChoice"]从列表中) 图像文件名。 首先查看是否有选择。 如果存在，则为图像构造一个路径，该路径由图像的文件夹名称和用户的图像文件名组成。 (如果尝试构造路径，但中 Request["photoChoice"]没有任何内容，则会收到错误。) 这会导致相对路径，如下所示：

images/Photo1.jpg

路径存储在名为 imagePath 的变量中，稍后将在页面中用到该变量中。

在正文中，还有一个 元素，用于显示用户选取的图像。 属性 src 不会设置为文件名或 URL，就像显示静态元素一样。 相反，它设置为 @imagePath，这意味着它从代码中设置的路径获取其值。

但是，第一次运行页面时，不会显示任何图像，因为用户尚未选择任何内容。 这通常意味着 src 属性将为空，并且图像将显示为红色的“x” (或浏览器在) 找不到图像时呈现的任何内容。 若要防止这种情况，请将 元素放入 一个 if 块中，该块测试该变量中是否有 imagePath 任何内容。 如果用户进行了选择， imagePath 则包含路径。 如果用户未选取图像，或者这是第一次显示页面， 则元素甚至不会呈现。

保存文件并在浏览器中运行页面。 (在运行页面之前，请确保在 “文件” 工作区中选择该页面。)

从下拉列表中选择一个图像，然后单击“ 示例图像”。 确保看到不同选项的不同图像。

上传图像

上一个示例演示了如何动态显示图像，但它仅适用于网站上已有的图像。 此过程演示如何让用户上传图像，该图像随后会显示在页面上。 在 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);

}

}

}

Upload Image

Image

Uploaded Image

@if(imagePath != ""){

}

文本正文有一个 元素，允许用户选择要上传的文件。 单击“ 提交”时，将连同表单一起提交他们选取的文件。

若要获取上传的图像，请使用 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 编程简介。)

与上一个示例一样，页面的正文包含一个 用于显示图像的元素。 如果 imagePath 已设置，则 呈现 元素，其 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 1038) 和生成该数字的算法之间，生成的数字几乎可以保证是一种类型。 因此，当必须保证不会使用同一名称两次时，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); }

}

}

Thumbnail Image

@if(imagePath != ""){

}

此代码类似于上一示例中的代码。 区别在于，此代码会保存图像两次，一次是正常保存，一次是在创建图像的缩略图副本后保存一次。 首先，获取上传的图像并将其保存在 images 文件夹中。 然后，为缩略图构造新路径。 若要实际创建缩略图，请调用 WebImage 帮助程序 Resize 的方法来创建 60 像素 x 60 像素的图像。 此示例演示了如何保留纵横比，以及如何防止图像被放大 (以防新大小实际使图像) 更大。 然后，调整大小的图像将保存在 Thumbs 子文件夹中。

在标记结束时，使用与前面示例中看到的动态src属性相同的元素来有条件地显示图像。 在本例中，将显示缩略图。 还可以使用 元素创建指向大型映像版本的超链接。 与 元素src的 属性一样，可将 元素的 属性动态设置为 href 中的imagePath任意属性。 若要确保路径可以用作 URL，请传递给 imagePathHtml.AttributeEncode 方法，该方法将路径中的保留字符转换为 URL 中正常的字符。