在网页上显示真正的缩略图,非js处理的缩放

网站上可能会有很多图片，比如产品图片等，而且他们可能大小不一，宽度和高度也不一定一样，有的很大有的很小。如果放在一张网页上，可能会破坏版面，但是如果强制让他们按照指定的宽度和高度显示，因为比例不同还会出现变形，显示效果很糟糕，还有最大的缺点是，文件尺寸丝毫没有变化，当图片很大的时候，用户想要看到图片，必须经过漫长等待下载图片，怎么办呢？

好，这里设计到了缩略图，就像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语言：

程序代码:

源代码
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->1usingSystem;
2usingSystem.Collections;
3usingSystem.ComponentModel;
4usingSystem.Data;
5usingSystem.Drawing;
6usingSystem.Drawing.Drawing2D;
7usingSystem.Drawing.Imaging;
8usingSystem.Web;
9usingSystem.Web.SessionState;
10usingSystem.Web.UI;
11usingSystem.Web.UI.WebControls;
12usingSystem.Web.UI.HtmlControls;
13
14namespaceMeiYuan
15{
16/**////<summary>
17///GetThumbnail的摘要说明。
18///</summary>
19publicclassGetThumbnail:System.Web.UI.Page
20{
21
22privatevoidPage_Load(objectsender,System.EventArgse)
23{
24Response.Clear();
25
26stringoriginalFileName=Server.MapPath(Request.QueryString["fn"]);
27intthumbnailWidth=Convert.ToInt16(Request.QueryString["tw"]);
28intthumbnailHeight=Convert.ToInt16(Request.QueryString["th"]);
29stringbgColorString=Convert.ToString(Request.QueryString["bg"]);
30
31ColorConvertercv=newColorConverter();
32ColorbgColor=(Color)cv.ConvertFromString("#"+bgColorString);
33
34System.Drawing.Imageimg=System.Drawing.Image.FromFile(originalFileName);
35
36System.Drawing.Imaging.ImageFormatthisFormat=img.RawFormat;
37
38System.Drawing.SizenewSize=this.GetNewSize(thumbnailWidth,thumbnailHeight,img.Width,img.Height);
39
40System.Drawing.BitmapoutBmp=newBitmap(thumbnailWidth,thumbnailHeight);
41
42System.Drawing.Graphicsg=System.Drawing.Graphics.FromImage(outBmp);
43
44//设置画布的描绘质量
45g.CompositingQuality=CompositingQuality.HighQuality;
46g.SmoothingMode=SmoothingMode.HighQuality;
47g.InterpolationMode=InterpolationMode.HighQualityBicubic;
48//g.Clear(System.Drawing.Color.FromArgb(255,249,255,240));
49g.Clear(bgColor);
50g.DrawImage(img,newRectangle((thumbnailWidth-newSize.Width)/2,
51(thumbnailHeight-newSize.Height)/2,
52newSize.Width,newSize.Height),
530,0,img.Width,img.Height,GraphicsUnit.Pixel);
54g.Dispose();
55
56if(thisFormat.Equals(System.Drawing.Imaging.ImageFormat.Gif))
57{
58Response.ContentType="image/gif";
59}
60else
61{
62Response.ContentType="image/jpeg";
63}
64
65
66//设置压缩质量
67System.Drawing.Imaging.EncoderParametersencoderParams=newEncoderParameters();
68
69System.Drawing.Imaging.EncoderParameterencoderParam=
70newEncoderParameter(System.Drawing.Imaging.Encoder.Quality,newlong[]{100});
71encoderParams.Param[0]=encoderParam;
72
73
74
75//获得包含有关内置图像编码解码器的信息的ImageCodecInfo对象。
76System.Drawing.Imaging.ImageCodecInfo[]arrayICI=System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders();
77System.Drawing.Imaging.ImageCodecInfojpegICI=null;
78
79for(intfwd=0;fwd<arrayICI.Length;fwd++)
80{
81if(arrayICI[fwd].FormatDescription.Equals("JPEG"))
82{
83jpegICI=arrayICI[fwd];
84break;
85}
86}
87
88if(jpegICI==null)
89{
90outBmp.Save(Response.OutputStream,jpegICI,encoderParams);
91}
92else
93{
94outBmp.Save(Response.OutputStream,thisFormat);
95}
96
97
98
99}
100
101Web窗体设计器生成的代码#regionWeb窗体设计器生成的代码
102overrideprotectedvoidOnInit(EventArgse)
103{
104//
105//CODEGEN:该调用是ASP.NETWeb窗体设计器所必需的。
106//
107InitializeComponent();
108base.OnInit(e);
109}
110
111/**////<summary>
112///设计器支持所需的方法-不要使用代码编辑器修改
113///此方法的内容。
114///</summary>
115privatevoidInitializeComponent()
116{
117this.Load+=newSystem.EventHandler(this.Page_Load);
118}
119#endregion
120
121System.Drawing.SizeGetNewSize(intmaxWidth,intmaxHeight,intwidth,intheight)
122{
123Doublew=0.0;
124Doubleh=0.0;
125Doublesw=Convert.ToDouble(width);
126Doublesh=Convert.ToDouble(height);
127Doublemw=Convert.ToDouble(maxWidth);
128Doublemh=Convert.ToDouble(maxHeight);
129
130if(sw<mw&&sh<mh)
131{
132w=sw;
133h=sh;
134}
135elseif((sw/sh)>(mw/mh))
136{
137w=maxWidth;
138h=(w*sh)/sw;
139}
140else
141{
142h=maxHeight;
143w=(h*sw)/sh;
144}
145returnnewSystem.Drawing.Size(Convert.ToInt32(w),Convert.ToInt32(h));
146}
147
148
149}
150}
151

网页中使用方法

调用示例
<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->1<Ahref='ProductDetail.aspx?ProductID=<%#DataBinder.Eval(Container,"DataItem.ProductID")%>'target=_blank>
<IMGheight=80src='GetThumbnail.aspx?fn=<%#Server.UrlEncode(DataBinder.Eval(Container,"DataItem.ImageUrl").ToString())%>&amp;tw=80&amp;th=80&amp;bg=FFF3F7'width=80border=0>
</A>