[原创]在网页上显示缩略图
网站上可能会有很多图片，比如产品图片等，而且他们可能大小不一，宽度和高度也不一定一样，有的很大有的很小。如果放在一张网页上，可能会破坏版面，但是如果强制让他们按照指定的宽度和高度显示，因为比例不同还会出现变形，显示效果很糟糕，还有最大的缺点是，文件尺寸丝毫没有变化，当图片很大的时候，用户想要看到图片，必须经过漫长等待下载图片，怎么办呢？<br><br>好，这里设计到了缩略图，就像Windows中的缩略图查看一样，你所看到的是从原图按照1：1比例缩小的图片，而且满足规定在指定宽度和高度的范围内显示（如果图片填不满，就用空白）。缩略图不是原图，而是利用原图实时按照指定大小生成的，他的好处就是你可以充分控制缩略图的质量，宽度高度，文件大小也在合理的范围内，省去漫长等待。<br><br>本文将讨论如何生成缩略图，举一反三，又可以派生许多用处，比如，自己写一个验证码控件等。<br><br>1、理解对图片的请求和流<br> 一般来说，我们用<a href="http://xxx/a.aspx" target="_blank" >http://xxx/a.aspx</A>对a.aspx网页请求。ASP.NET处理了网页以后，就把该网页的内容发送回浏览器。a.aspx的内容一般是含有超文本标记的文本文件流，这是谁都不会怀疑的。但是a.aspx不但能够返回这种非常平常的网页文本外，把它广义开来，它其实可以放回任何类型的流数据。而，我们只需要对Response对象进行操作即可改变输出流的内容。<br> 把图像文件看作是一个二进制流，我们试图从一个图像文件创建了他的流对象，并且将流写入到Response.OutputStream中，这样图像文件就被发给了请求的浏览器。但是浏览器还必须要识别出这是一个图像文件，因此，在发送这个流之前，将Response.ContentType更改成这种图像文件的MIME类型。浏览器在收到这个流之后，调用相关的应用程序，图像就被显示在了浏览器上。虽然实际地址还是aspx结尾。<br> 这样我们就能很好理解怎么去向用户发送标记。例如，在一张普通的网页中写标记img标记，使他的src指向a.aspx。浏览器在得到这张网页后，会处理img标记的内容，并向a.aspx发出请求，这是a.aspx作为图像流返回，浏览器就将图片显示出来。<br><br>2、生成缩略图<br> 有了上述技术基础，我们可以建立这样一个空的aspx网页，他通过接受传入的参数，生成缩略图的流，发送回浏览器。<br> 我们创建一个名叫GetThumbnail.aspx的文件，内容如下：<br><DIV class=HtmlCode><%@ Page Language="vb" AutoEventWireup="false" Codebehind="GetThumbnail.aspx.vb" Inherits="_51use.GetThumbnail"%></DIV>
<P>这一句Page指令仅仅是告诉服务器，这个文件的隐藏类是_51use.GetThumbnail，而如果我们都不作任何操作的话，这个文件最终输出时空的。<br>接下来看一下他的隐藏类是如何写的，在这里我们使用的是B语言：<br></P>[CODE]
<DIV class=HtmlCode>
<P>Public Class GetThumbnail<br> Inherits System.Web.UI.Page</P>
<P>#Region " Web 窗体设计器生成的代码 "</P>
<P> '该调用是 Web 窗体设计器所必需的。<br> <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()</P>
<P> End Sub</P>
<P> '注意: 以下占位符声明是 Web 窗体设计器所必需的。<br> '不要删除或移动它。<br> Private designerPlaceholderDeclaration As System.Object</P>
<P> Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init<br> 'CODEGEN: 此方法调用是 Web 窗体设计器所必需的<br> '不要使用代码编辑器修改它。<br> InitializeComponent()<br> End Sub</P>
<P>#End Region</P>
<P> Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load<br> '在此处放置初始化页的用户代码<br> '获取几个参数，用以生成缩略图片<br> '设置一个默认参数生成BitMap<br> Response.Clear()<br> Try<br> Dim originalFileName As String = Server.MapPath(Request("fn"))<br> Dim thumbnailWidth As Integer = Request("tw")<br> Dim thumbnailHeight As Integer = Request("th")</P>
<P> Dim img As System.Drawing.Image = System.Drawing.Image.FromFile(originalFileName)<br> Dim thisFormat As System.Drawing.Imaging.ImageFormat = img.RawFormat<br> Dim newSize As System.Drawing.Size = Me.GetNewSize(thumbnailWidth, thumbnailHeight, img.Width, img.Height)<br> Dim outBmp As New System.Drawing.Bitmap(thumbnailWidth, thumbnailHeight)<br> Dim g As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(outBmp)</P>
<P> '设置画布的描绘质量<br> g.CompositingQuality = Drawing2D.CompositingQuality.HighQuality<br> g.SmoothingMode = Drawing2D.SmoothingMode.HighQuality<br> g.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic<br> g.Clear(System.Drawing.Color.FromArgb(255, 249, 255, 240))<br> 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)<br> g.Dispose()</P>
<P> If thisFormat.Equals(System.Drawing.Imaging.ImageFormat.Gif) Then<br> Response.ContentType = "image/gif"<br> Else<br> Response.ContentType = "image/jpeg"<br> End If</P>
<P> '设置压缩质量<br> Dim encoderParams As New System.Drawing.Imaging.EncoderParameters<br> Dim quality(0) As Long<br> quality(0) = 100<br> Dim encoderParam As New System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, quality)<br> encoderParams.Param(0) = encoderParam</P>
<P> '获得包含有关内置图像编码解码器的信息的ImageCodecInfo 对象。<br> Dim arrayICI() As System.Drawing.Imaging.ImageCodecInfo = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders()<br> Dim jpegICI As System.Drawing.Imaging.ImageCodecInfo = Nothing<br> For fwd As Integer = 0 To arrayICI.Length - 1<br> If arrayICI(fwd).FormatDescription.Equals("JPEG") Then<br> jpegICI = arrayICI(fwd)<br> Exit For<br> End If<br> Next</P>
<P> If Not jpegICI Is Nothing Then<br> outBmp.Save(Response.OutputStream, jpegICI, encoderParams)<br> Else<br> outBmp.Save(Response.OutputStream, thisFormat)<br> End If<br> Catch ex As Exception</P>
<P> End Try<br> End Sub</P>
<P> Function GetNewSize(ByVal maxWidth As Integer, ByVal maxHeight As Integer, ByVal width As Integer, ByVal height As Integer) As System.Drawing.Size<br> Dim w As Double = 0.0<br> Dim h As Double = 0.0<br> Dim sw As Double = Convert.ToDouble(width)<br> Dim sh As Double = Convert.ToDouble(height)<br> Dim mw As Double = Convert.ToDouble(maxWidth)<br> Dim mh As Double = Convert.ToDouble(maxHeight)</P>
<P> If sw < mw And sh < mh Then<br> w = sw<br> h = sh<br> ElseIf (sw / sh) > (mw / mh) Then<br> w = maxWidth<br> h = (w * sh) / sw<br> Else<br> h = maxHeight<br> w = (h * sw) / sh<br> End If<br> Return New System.Drawing.Size(Convert.ToInt32(w), Convert.ToInt32(h))<br> End Function<br>End Class<br></P></DIV>[/CODE]<br>我们在Page_Load事件处理函数中，先获取要生成缩略图的原始文件的路径，和缩略图的宽度高度。<br>然后设置了一个子函数GetNewSize用以计算真正缩略图的大小（为什么还要计算阿？因为缩略图的宽高比和原始图片的宽高比不一样，缩小的图片要保证比例，按照比例缩小的原始图片，是按照约束在指定缩略图宽高范围内的原则，填充不满的地方使用背景色填补空白。另外，原图比缩略图小的话，我们就不做放大，而是按原图输出，所以计算是必须的）。<br><br>我们从原始图像创建了他的Image对象，并获得它的格式等信息，稍后用得到。<br><br>接下来新建一个BitMap对象，并由新的BitMap对象创建画板。设置画笔质量为高，交错模式为高质量立方式，这些的目的是使用最好的质量描绘缩略图，否则图片缩小后信息丢失图片失真就不好看了。接着，用指定的宽度和高度将原始图像的Image对象“画”在新的画板上。<br><br>修改Response.ContentType，这一步是告诉浏览器发送回的流的MIME类型，这个内容包含在HTTP Header中发送给浏览器。<br><br>图像画好了，现在我们要将其压缩一下，因为位图对象是很大的，不利于传输。因此下面的操作，我们设定一些高质量的压缩参数，根据获得的ICI（图像编码解码器信息），使用BitMap的Save方法将图片保存在Response.OutputStream流中。<br><br>这样在浏览器看来，对该网页的请求，相当于对一个图片文件的请求，只不过图片是实时生成的，只需传递参数合法有效，即可得到该图片的缩略图。<br><br>3、使用缩略图<br> 使用缩略图就变得相对简单了，只需要在URL后附上参数fn表示原始文件的位置（相对于根目录），tw缩略图宽度，th缩略图高度，下列简单显示了在Repeater中使用的情景：<br><br>
<DIV class=HtmlCode><asp:Repeater id=repWareList runat="server" DataSource="<%# dsWareList %>"><br> <ItemTemplate><br> <div class="ItemContainer"><br> <p><img <FONT color=#2b2bd5>src='../lib/GetThumbnail.aspx?fn=<%# Server.UrlEncode(Configurationsettings.AppSettings("WareImgPath") & Container.DataItem("WareImgPath"))%>&tw=120&th=120'</FONT> width="120" height="120" ></p><br> </div><br> </ItemTemplate><br></asp:Repeater></DIV><br>代码中蓝色部分就是对该页请求的URL，使用<FONT color=#2b2bd5><%# Server.UrlEncode(Configurationsettings.AppSettings("WareImgPath") & Container.DataItem("WareImgPath"))%></FONT><FONT color=#000000>语句从数据库获得路径和文件名适当构造成一个有效的请求路径。工作就算完成了。<br><br>下面就等着看看缩略图的效果：<br></FONT>[attach]7921[/attach]<br><br><br>后记<br> 本文中所述的缩略图生成法，使用的是流的概念，和文件系统也不沾边，因此这种方式可以跳过对文件系统权限检查，百分之百正确运行。当然，也可以借助文件系统。另外，根据上面流输出的概念，举一反三，可以弄出很多用法，例如NeoDynamic的条形码控件，你会发现条形码图片的路径居然就是本页页面，他巧妙地将对本页的请求通过对几个特征参数的判定而转向生成图片流，从而达到了不添加任何页面，不借助文件系统的“神奇效果”，只需要一个DLL即可使用。<br> 另外，很多人问生成验证码图片，也可以使用这样的思路，自己做一个这样的控件，或者网页。如果能做自定义控件更好。相信大家有这个能力。<br> 最后，还是提倡大家都去翻翻MSDN，有很大帮助。安装VS的时，7CD装的版本其中三张是MSDN Library，包含了近乎所有你想要了解的东西。如果有时间，不妨多访问一下MSDN中国，<a href="http://www.microsoft.com/china/msdn" target="_blank" >http://www.microsoft.com/china/msdn</A> ，不定期会有一些优秀的文章在上面。<br><br> 限于作者水平，出错难免，欢迎批评指正！
[align=right][color=#000066][此贴子已经被作者于2006-6-9 8:11:59编辑过][/color][/align]
辛苦了 天呀，有没C#的。。 <P>使用Refector来查看程序集，我已经将它转变为C#代码，如下：<BR>其实稍微用一下心，熟练掌握了这几种语言的区别，很容易进行语言变换。参考第一篇文章，看看有什么不同和改进呢？<BR>[CODE]private void Page_Load(object sender, EventArgs e)<BR>{<BR> this.Response.Clear();<BR> try<BR> {<BR> string originalFileName = this.Server.MapPath(this.Request["fn"]);<BR> int thumbnailWidth = IntegerType.FromString(this.Request["tw"]);<BR> int thumbnailHeight = IntegerType.FromString(this.Request["th"]);<BR> Image img = Image.FromFile(originalFileName);<BR> ImageFormat thisFormat = img.RawFormat;<BR> Size newSize = this.GetNewSize(thumbnailWidth, thumbnailHeight, img.Width, img.Height);<BR> Bitmap outBmp = new Bitmap(thumbnailWidth, thumbnailHeight);<BR> Graphics g = Graphics.FromImage(outBmp);<BR> g.CompositingQuality = CompositingQuality.HighQuality;<BR> g.SmoothingMode = SmoothingMode.HighQuality;<BR> g.InterpolationMode = InterpolationMode.HighQualityBicubic;<BR> g.Clear(Color.FromArgb(0xff, 0xf9, 0xff, 240));<BR> Rectangle _Vb_t_record_0 = new Rectangle((int) Math.Round((double) (((double) (thumbnailWidth - newSize.Width)) / 2)), (int) Math.Round((double) (((double) (thumbnailHeight - newSize.Height)) / 2)), newSize.Width, newSize.Height);<BR> g.DrawImage(img, _Vb_t_record_0, 0, 0, img.Width, img.Height, GraphicsUnit.Pixel);<BR> g.Dispose();<BR> if (thisFormat.Equals(ImageFormat.Gif))<BR> {<BR> this.Response.ContentType = "image/gif";<BR> }<BR> else<BR> {<BR> this.Response.ContentType = "image/jpeg";<BR> }<BR> EncoderParameters encoderParams = new EncoderParameters();<BR> long[] quality = new long[] { 100 };<BR> EncoderParameter encoderParam = new EncoderParameter(Encoder.Quality, quality);<BR> encoderParams.Param[0] = encoderParam;<BR> ImageCodecInfo[] arrayICI = ImageCodecInfo.GetImageEncoders();<BR> ImageCodecInfo jpegICI = null;<BR> int _Vb_t_i4_0 = arrayICI.Length - 1;<BR> for (int fwd = 0; fwd <= _Vb_t_i4_0; fwd++)<BR> {<BR> if (arrayICI[fwd].FormatDescription.Equals("JPEG"))<BR> {<BR> jpegICI = arrayICI[fwd];<BR> break;<BR> }<BR> }<BR> if (jpegICI != null)<BR> {<BR> outBmp.Save(this.Response.OutputStream, jpegICI, encoderParams);<BR> }<BR> else<BR> {<BR> outBmp.Save(this.Response.OutputStream, thisFormat);<BR> }<BR> }<BR> catch (Exception exception1)<BR> {<BR> ProjectData.SetProjectError(exception1);<BR> Exception ex = exception1;<BR> ProjectData.ClearProjectError();<BR> return;<BR> }<BR>}[/CODE]</P> <P>支持</P> <P>自己慢慢看！<BR>呵呵，先谢了再说！</P> <P>我还没看，就忍不住先谢你了。因为这个太需要了，对大多数人来说都是。</P> C# 版先看，不过还是把帖子先顶上去。。 不然太对不起楼主了。。 <P>怎么不加注释啊，麻烦楼主加上吧。</P> <DIV class=quote><B>以下是引用<U>lcs</U>在2006-7-2 13:14:59的发言：</B><BR>
<P>怎么不加注释啊，麻烦楼主加上吧。</P></DIV><FONT style="BACKGROUND-COLOR: #f3f3f3">你很无耻你自己知道么?[em05]</FONT> 这个东西用JS脚本很方便的啊!<BR><script language=JavaScript> <BR>var flag=false; <BR>function DrawImage(ImgD){ <BR>var image=new Image(); <BR>image.src=ImgD.src; <BR>if(image.width>0 && image.height>0){ <BR>flag=true; <BR>if(image.width/image.height>= 140/180){ <BR>if(image.width>140){ <BR>ImgD.width=140; <BR>ImgD.height=(image.height*140)/image.width; <BR>}else{ <BR>ImgD.width=image.width; <BR>ImgD.height=image.height; <BR>} <BR>/*ImgD.alt=image.width+"×"+image.height;*/ <BR>} <BR>else{ <BR>if(image.height>180){ <BR>ImgD.height=180; <BR>ImgD.width=(image.width*180)/image.height; <BR>}else{ <BR>ImgD.width=image.width; <BR>ImgD.height=image.height; <BR>} <BR>/*ImgD.alt=image.width+"×"+image.height;*/ <BR>} <BR>} <BR>/*else{ <BR>ImgD.src=""; <BR>ImgD.alt="" <BR>}*/ <BR>} <BR></script> <BR><BR><BR>在图片上加载这个事件:<BR><BR>如:<img src="test.jpg" onload='javascript:DrawImage(this);' border="0" class="hui_border"> 太感谢了<BR> 刚发现要找的，呵呵，谢谢楼主了 不错<BR><BR>好东西。 <P>不错 不错味道好极勒 哈哈哈</P> 呵呵 有点不太会使用，可以指点一下吗？我用的是image控件，图片是在datalist上绑定的[em13] 顶回去 对好的东西要顶![tk05] [tk05] 好东西支持一下
页:
[1]
2