用ASP.NET在网页上显示缩略图

1、用用 ASP.NETASP.NET 在网页上显示缩略图在网页上显示缩略图本文关键字：本文关键字：网站上可能会有很多图片，比如产品图片等，而且他们可能大小不一，宽度和高度也不一定一样，有的很大有的很小。如果放在一张网页上，可能会破坏版面，但是如果强制让他们按照指定的宽度和高度显示，因为比例不同还会出现变形，显示效果很糟糕，还有最大的缺点是，文件尺寸丝毫没有变化，当图片很大的时候，用户想要看到图片，必须经过漫长等待下载图片，怎么办呢？好，这里设计到了缩略图，就像 Windows 中的缩略图查看一样，你所看到的是从原图按照 1：1 比例缩小的图片，而且满足规定在指定宽度和高度的范围内显示（如果图片填

2、不满，就用空白）。缩略图不是原图，而是利用原图实时按照指定大小生成的，他的好处就是你可以充分控制缩略图的质量，宽度高度，文件大小也在合理的范围内，省去漫长等待。本文将讨论如何生成缩略图，举一反三，又可以派生许多用处，比如，自己写一个验证码控件等。1、理解对图片的请求和流一般来说，我们用 http:/xxx/a.aspx 对 a.aspx 网页请求。ASP.NET处理了网页以后，就把该网页的内容发送回浏览器。a.aspx 的内容一般是含有超文本标记的文本文件流，这是谁都不会怀疑的。但是 a.aspx 不但能够返回这种非常平常的网页文本外，把它广义开来，它其实可以放回任何类型的流数据。而，我们只需

3、要对 Response 对象进行操作即可改变输出流的内容。把图像文件看作是一个二进制流，我们试图从一个图像文件创建了他的流对象，并且将流写入到 Response.OutputStream 中，这样图像文件就被发给了请求的浏览器。但是浏览器还必须要识别出这是一个图像文件，因此，在发送这个流之前，将 Response.ContentType 更改成这种图像文件的 MIME 类型。浏览器在收到这个流之后，调用相关的应用程序，图像就被显示在了浏览器上。虽然实际地址还是 aspx 结尾。这样我们就能很好理解怎么去向用户发送标记。例如，在一张普通的网页中写标记 img 标记，使他的 src 指向 a.as

4、px。浏览器在得到这张网页后，会处理 img 标记的内容，并向 a.aspx 发出请求，这是 a.aspx 作为图像流返回，浏览器就将图片显示出来。2、生成缩略图有了上述技术基础，我们可以建立这样一个空的 aspx 网页，他通过接受传入的参数，生成缩略图的流，发送回浏览器。我们创建一个名叫 GetThumbnail.aspx 的文件，内容如下：这一句 Page 指令仅仅是告诉服务器，这个文件的隐藏类是_51use.GetThumbnail，而如果我们都不作任何操作的话，这个文件最终输出时空的。接下来看一下他的隐藏类是如何写的，在这里我们使用的是 B 语言：程序代码:Public Class G

5、etThumbnailInherits System.Web.UI.Page#Region Web 窗体设计器生成的代码 该调用是 Web 窗体设计器所必需的。 Private SubInitializeComponent()End Sub注意: 以下占位符声明是 Web 窗体设计器所必需的。不要删除或移动它。Private designerPlaceholderDeclaration As System.ObjectPrivate Sub Page_Init(ByVal sender As System.Object,欢迎光临八一学习网八一学习网,收藏本篇文章收藏本篇文章$False$ByV

6、al e As System.EventArgs) Handles MyBase.InitCODEGEN: 此方法调用是 Web 窗体设计器所必需的不要使用代码编辑器修改它。InitializeComponent()End Sub#End RegionPrivate Sub Page_Load(ByVal sender As System.Object, ByVal eAs System.EventArgs) Handles MyBase.Load在此处放置初始化页的用户代码获取几个参数，用以生成缩略图片设置一个默认参数生成 BitMapResponse.Clear()TryDim origi

7、nalFileName 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.RawFormatDim newSize As S

8、ystem.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.HighQ

9、ualityg.SmoothingMode = Drawing2D.SmoothingMode.HighQuality本文关键字：本文关键字：g.InterpolationMode =Drawing2D.InterpolationMode.HighQualityBicubicg.Clear(System.Drawing.Color.FromArgb(255, 249, 255, 240)g.DrawImage(img, New Rectangle(thumbnailWidth -newSize.Width) / 2, (thumbnailHeight - newSize.Height) / 2

10、,newSize.Width, newSize.Height), 0, 0, img.Width, img.Height,GraphicsUnit.Pixel)g.Dispose()If thisFormat.Equals(System.Drawing.Imaging.ImageFormat.Gif)ThenResponse.ContentType = image/gifElse欢迎光临八一学习网八一学习网,收藏本篇文章收藏本篇文章Response.ContentType = image/jpegEnd If设置压缩质量Dim encoderParams As NewSystem.Drawin

11、g.Imaging.EncoderParametersDim quality(0) As Longquality(0) = 100Dim encoderParam As NewSystem.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, quality)encoderParams.Param(0) = encoderParam获得包含有关内置图像编码解码器的信息的 ImageCodecInfo 对象。Dim arrayICI() As System.Drawing.Imaging.ImageCod

12、ecInfo =System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders()Dim jpegICI As System.Drawing.Imaging.ImageCodecInfo =NothingFor fwd As Integer = 0 To arrayICI.Length - 1If arrayICI(fwd).FormatDescription.Equals(JPEG) ThenjpegICI = arrayICI(fwd)&nbs1212 p;Exit ForEnd IfNextIf Not jpegICI Is Noth

13、ing ThenoutBmp.Save(Response.OutputStream, jpegICI, encoderParams)ElseoutBmp.Save(Response.OutputStream, thisFormat)End IfCatch ex As ExceptionEnd TryEnd SubFunction GetNewSize(ByVal maxWidth As Integer, ByValmaxHeight As Integer, ByVal width As Integer, ByVal height As Integer)As System.Drawing.Siz

14、eDim w As Double = 0.0Dim h As Double = 0.0Dim 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 (mw / mh) Thenw = maxWidthh = (w * sh) / swElseh = maxHeightw = (

15、h * sw) / shEnd IfReturn New System.Drawing.Size(Convert.ToInt32(w),Convert.ToInt32(h)End FunctionEnd Class我们在 Page_Load 事件处理函数中，先获取要生成缩略图的原始文件的路径，和缩略图的宽度高度。然后设置了一个子函数 GetNewSize 用以计算真正缩略图的大小（为什么还要计算阿？因为缩略图的宽高比和原始图片的宽高比不一样，缩小的图片要保证比例，按照比例缩小的原始图片，是按照约束在指定缩略图宽高范围内的原则，填充不满的地方使用背景色填补空白。另外，原图比缩略图小的话，我们就不

16、做放大，而是按原图输出，所以计算是必须的本文关键字：本文关键字：3、使用缩略图使用缩略图就变得相对简单了，只需要在 URL 后附上参数 fn 表示原始文件的位置（相对于根目录），tw 缩略图宽度，th 缩略图高度，下列简单显示了在 Repeater 中使用的情景：asp:Repeater id=repWareList runat=server DataSource=imgsrc=http:/ width=120height=120 代码中蓝色部分就是对该页请求的 URL，使用语句从数据库获得路径和文件名适当构造成一个有效的请求路径。工作就算完成了。欢迎光临八一学习网八一学习网,点击这里点击这里查看更多文章教程下面就等着看看缩略图的效果：后记本文中所述的缩略图生成法，使用的是流的概念，和文件系统也不沾边，因此这种方式可以跳过对文件系统权限检查，百分之百正确运行。当然，也可以借助文件系统。另外，根据上面流输出的概念，举一反三，可以弄出很多用法，例如 NeoDynamic 的条形码控件，你会发现条形码图片的路径居然就是本页页面，他巧妙地将对本页的请求通过对几个特征参数的判定而转向生成图片流，从而达到了不添加