[图文]用ASP.NET在网页上显示缩略图
点击次数：15 次 发布日期：2008-11-26 12:05:11 作者：源代码网
|
源代码网推荐 源代码网推荐 好，这里设计到了缩略图，就像Windows中的缩略图查看一样，你所看到的是从原图按照1：1比例缩小的图片，而且满足规定在指定宽度和高度的范围内显示（如果图片填不满，就用空白）。缩略图不是原图，而是利用原图实时按照指定大小生成的，他的好处就是你可以充分控制缩略图的质量，宽度高度，文件大小也在合理的范围内，省去漫长等待。 源代码网推荐 源代码网推荐 本文将讨论如何生成缩略图，举一反三，又可以派生许多用处，比如，自己写一个验证码控件等。 源代码网推荐 源代码网推荐 1、理解对图片的请求和流 源代码网推荐 一般来说，我们用http://xxx/a.aspx对a.aspx网页请求。ASP.NET处理了网页以后，就把该网页的内容发送回浏览器。a.aspx的内容一般是含有超文本标记的文本文件流，这是谁都不会怀疑的。但是a.aspx不但能够返回这种非常平常的网页文本外，把它广义开来，它其实可以放回任何类型的流数据。而，我们只需要对Response对象进行操作即可改变输出流的内容。 源代码网推荐 把图像文件看作是一个二进制流，我们试图从一个图像文件创建了他的流对象，并且将流写入到Response.OutputStream中，这样图像文件就被发给了请求的浏览器。但是浏览器还必须要识别出这是一个图像文件，因此，在发送这个流之前，将Response.ContentType更改成这种图像文件的MIME类型。浏览器在收到这个流之后，调用相关的应用程序，图像就被显示在了浏览器上。虽然实际地址还是aspx结尾。 源代码网推荐 这样我们就能很好理解怎么去向用户发送标记。例如，在一张普通的网页中写标记img标记，使他的src指向a.aspx。浏览器在得到这张网页后，会处理img标记的内容，并向a.aspx发出请求，这是a.aspx作为图像流返回，浏览器就将图片显示出来。 源代码网推荐 源代码网推荐 2、生成缩略图 源代码网推荐 有了上述技术基础，我们可以建立这样一个空的aspx网页，他通过接受传入的参数，生成缩略图的流，发送回浏览器。 源代码网推荐 我们创建一个名叫GetThumbnail.aspx的文件，内容如下： 源代码网推荐 源代码网推荐 源代码网推荐 <%@ Page Language="vb" AutoEventWireup="false" Codebehind="GetThumbnail.aspx.vb" Inherits="_51use.GetThumbnail"%> 源代码网推荐 这一句Page指令仅仅是告诉服务器，这个文件的隐藏类是_51use.GetThumbnail，而如果我们都不作任何操作的话，这个文件最终输出时空的。 源代码网推荐 接下来看一下他的隐藏类是如何写的，在这里我们使用的是B语言： 源代码网推荐 源代码网推荐 源代码网推荐 程序代码: 源代码网推荐 源代码网推荐 源代码网推荐 Public Class GetThumbnail 源代码网推荐 Inherits System.Web.UI.Page 源代码网推荐 源代码网推荐 #Region " Web 窗体设计器生成的代码 " 源代码网推荐 源代码网推荐 "该调用是 Web 窗体设计器所必需的。 源代码网推荐 <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() 源代码网推荐 源代码网推荐 End Sub 源代码网推荐 源代码网推荐 "注意: 以下占位符声明是 Web 窗体设计器所必需的。 源代码网推荐 "不要删除或移动它。 源代码网推荐 Private designerPlaceholderDeclaration As System.Object 源代码网推荐 源代码网推荐 Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 源代码网推荐 "CODEGEN: 此方法调用是 Web 窗体设计器所必需的 源代码网推荐 "不要使用代码编辑器修改它。 源代码网推荐 InitializeComponent() 源代码网推荐 End Sub 源代码网推荐 源代码网推荐 #End Region 源代码网推荐 源代码网推荐 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 源代码网推荐 "在此处放置初始化页的用户代码 源代码网推荐 "获取几个参数，用以生成缩略图片 源代码网推荐 "设置一个默认参数生成BitMap 源代码网推荐 Response.Clear() 源代码网推荐 Try 源代码网推荐 Dim originalFileName As String = Server.MapPath(Request("fn")) 源代码网推荐 Dim thumbnailWidth As Integer = Request("tw") 源代码网推荐 Dim thumbnailHeight As Integer = Request("th") 源代码网推荐 源代码网推荐 Dim img As System.Drawing.Image = System.Drawing.Image.FromFile(originalFileName) 源代码网推荐 Dim thisFormat As System.Drawing.Imaging.ImageFormat = img.RawFormat 源代码网推荐 Dim newSize As System.Drawing.Size = Me.GetNewSize(thumbnailWidth, thumbnailHeight, img.Width, img.Height) 源代码网推荐 Dim outBmp As New System.Drawing.Bitmap(thumbnailWidth, thumbnailHeight) 源代码网推荐 Dim g As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(outBmp) 源代码网推荐 源代码网推荐 "设置画布的描绘质量 源代码网推荐 g.CompositingQuality = Drawing2D.CompositingQuality.HighQuality 源代码网推荐 g.SmoothingMode = Drawing2D.SmoothingMode.HighQuality 源代码网推荐 g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic 源代码网推荐 g.Clear(System.Drawing.Color.FromArgb(255, 249, 255, 240)) 源代码网推荐 g.DrawImage(img, New Rectangle((thumbnailWidth - newSize.Width) / 2, (thumbnailHeight - newSize.Height) / 2, newSize.Width, newSize.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel) 源代码网推荐 g.Dispose() 源代码网推荐 源代码网推荐 If thisFormat.Equals(System.Drawing.Imaging.ImageFormat.Gif) Then 源代码网推荐 Response.ContentType = "image/gif" 源代码网推荐 Else 源代码网推荐 Response.ContentType = "image/jpeg" 源代码网推荐 End If 源代码网推荐 源代码网推荐 "设置压缩质量 源代码网推荐 Dim encoderParams As New System.Drawing.Imaging.EncoderParameters 源代码网推荐 Dim quality(0) As Long 源代码网推荐 quality(0) = 100 源代码网推荐 Dim encoderParam As New System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, quality) 源代码网推荐 encoderParams.Param(0) = encoderParam 源代码网推荐 源代码网推荐 "获得包含有关内置图像编码解码器的信息的ImageCodecInfo 对象。 源代码网推荐 Dim arrayICI() As System.Drawing.Imaging.ImageCodecInfo = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders() 源代码网推荐 Dim jpegICI As System.Drawing.Imaging.ImageCodecInfo = Nothing 源代码网推荐 For fwd As Integer = 0 To arrayICI.Length - 1 源代码网推荐 If arrayICI(fwd).FormatDescription.Equals("JPEG") Then 源代码网推荐 jpegICI = arrayICI(fwd) 源代码网推荐 Exit For 源代码网推荐 End If 源代码网推荐 Next 源代码网推荐 源代码网推荐 If Not jpegICI Is Nothing Then 源代码网推荐 outBmp.Save(Response.OutputStream, jpegICI, encoderParams) 源代码网推荐 Else 源代码网推荐 outBmp.Save(Response.OutputStream, thisFormat) 源代码网推荐 End If 源代码网推荐 Catch ex As Exception 源代码网推荐 源代码网推荐 End Try 源代码网推荐 End Sub 源代码网推荐 源代码网推荐 Function GetNewSize(ByVal maxWidth As Integer, ByVal maxHeight As Integer, ByVal width As Integer, ByVal height As Integer) As System.Drawing.Size 源代码网推荐 Dim w As Double = 0.0 源代码网推荐 Dim h As Double = 0.0 源代码网推荐 Dim sw As Double = Convert.ToDouble(width) 源代码网推荐 Dim sh As Double = Convert.ToDouble(height) 源代码网推荐 Dim mw As Double = Convert.ToDouble(maxWidth) 源代码网推荐 Dim mh As Double = Convert.ToDouble(maxHeight) 源代码网推荐 源代码网推荐 If sw < mw And sh < mh Then 源代码网推荐 w = sw 源代码网推荐 h = sh 源代码网推荐 ElseIf (sw / sh) > (mw / mh) Then 源代码网推荐 w = maxWidth 源代码网推荐 h = (w * sh) / sw 源代码网推荐 Else 源代码网推荐 h = maxHeight 源代码网推荐 w = (h * sw) / sh 源代码网推荐 End If 源代码网推荐 Return New System.Drawing.Size(Convert.ToInt32(w), Convert.ToInt32(h)) 源代码网推荐 End Function 源代码网推荐 End Class 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 我们在Page_Load事件处理函数中，先获取要生成缩略图的原始文件的路径，和缩略图的宽度高度。 源代码网推荐 然后设置了一个子函数GetNewSize用以计算真正缩略图的大小（为什么还要计算阿？因为缩略图的宽高比和原始图片的宽高比不一样，缩小的图片要保证比例，按照比例缩小的原始图片，是按照约束在指定缩略图宽高范围内的原则，填充不满的地方使用背景色填补空白。另外，原图比缩略图小的话，我们就不做放大，而是按原图输出，所以计算是必须的）。 源代码网推荐 源代码网推荐 我们从原始图像创建了他的Image对象，并获得它的格式等信息，稍后用得到。 源代码网推荐 源代码网推荐 接下来新建一个BitMap对象，并由新的BitMap对象创建画板。设置画笔质量为高，交错模式为高质量立方式，这些的目的是使用最好的质量描绘缩略图，否则图片缩小后信息丢失图片失真就不好看了。接着，用指定的宽度和高度将原始图像的Image对象“画”在新的画板上。 源代码网推荐 源代码网推荐 修改Response.ContentType，这一步是告诉浏览器发送回的流的MIME类型，这个内容包含在HTTP Header中发送给浏览器。 源代码网推荐 源代码网推荐 图像画好了，现在我们要将其压缩一下，因为位图对象是很大的，不利于传输。因此下面的操作，我们设定一些高质量的压缩参数，根据获得的ICI（图像编码解码器信息），使用BitMap的Save方法将图片保存在Response.OutputStream流中。 源代码网推荐 源代码网推荐 这样在浏览器看来，对该网页的请求，相当于对一个图片文件的请求，只不过图片是实时生成的，只需传递参数合法有效，即可得到该图片的缩略图。 源代码网推荐 源代码网推荐 3、使用缩略图 源代码网推荐 使用缩略图就变得相对简单了，只需要在URL后附上参数fn表示原始文件的位置（相对于根目录），tw缩略图宽度，th缩略图高度，下列简单显示了在Repeater中使用的情景： 源代码网推荐 源代码网推荐 源代码网推荐 <asp:Repeater id=repWareList runat="server" DataSource="<%# dsWareList %>"> 源代码网推荐 <ItemTemplate> 源代码网推荐 <div class="ItemContainer"> 源代码网推荐 <p><img src="http://www.zzchn.com/edu/20080727/../lib/GetThumbnail.aspx?fn=<%# Server.UrlEncode(Configurationsettings.AppSettings("WareImgPath") & Container.DataItem("WareImgPath"))%>&tw=120&th=120" width="120" height="120" ></p> 源代码网推荐 </div> 源代码网推荐 </ItemTemplate> 源代码网推荐 </asp:Repeater> 源代码网推荐 源代码网推荐 代码中蓝色部分就是对该页请求的URL，使用<%# Server.UrlEncode(Configurationsettings.AppSettings("WareImgPath") & Container.DataItem("WareImgPath"))%>语句从数据库获得路径和文件名适当构造成一个有效的请求路径。工作就算完成了。 源代码网推荐 源代码网推荐 下面就等着看看缩略图的效果： 源代码网推荐 
源代码网推荐 后记 源代码网推荐 本文中所述的缩略图生成法，使用的是流的概念，和文件系统也不沾边，因此这种方式可以跳过对文件系统权限检查，百分之百正确运行。当然，也可以借助文件系统。另外，根据上面流输出的概念，举一反三，可以弄出很多用法，例如NeoDynamic的条形码控件，你会发现条形码图片的路径居然就是本页页面，他巧妙地将对本页的请求通过对几个特征参数的判定而转向生成图片流，从而达到了不添加任何页面，不借助文件系统的“神奇效果”，只需要一个DLL即可使用。 源代码网推荐 另外，很多人问生成验证码图片，也可以使用这样的思路，自己做一个这样的控件，或者网页。如果能做自定义控件更好。相信大家有这个能力。 源代码网推荐 最后，还是提倡大家都去翻翻MSDN，有很大帮助。安装VS的时，7CD装的版本其中三张是MSDN Library，包含了近乎所有你想要了解的东西。如果有时间，不妨多访问一下MSDN中国，不定期会有一些优秀的文章在上面。 源代码网推荐 源代码网推荐 限于作者水平，出错难免，欢迎批评指正！ 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
