用ASP.NET在網(wǎng)頁上顯示縮略圖

1、用用 ASP.NETASP.NET 在網(wǎng)頁上顯示縮略圖在網(wǎng)頁上顯示縮略圖本文關(guān)鍵字：本文關(guān)鍵字：網(wǎng)站上可能會有很多圖片，比如產(chǎn)品圖片等，而且他們可能大小不一，寬度和高度也不一定一樣，有的很大有的很小。如果放在一張網(wǎng)頁上，可能會破壞版面，但是如果強(qiáng)制讓他們按照指定的寬度和高度顯示，因為比例不同還會出現(xiàn)變形，顯示效果很糟糕，還有最大的缺點(diǎn)是，文件尺寸絲毫沒有變化，當(dāng)圖片很大的時候，用戶想要看到圖片，必須經(jīng)過漫長等待下載圖片，怎么辦呢？好，這里設(shè)計到了縮略圖，就像 Windows 中的縮略圖查看一樣，你所看到的是從原圖按照 1：1 比例縮小的圖片，而且滿足規(guī)定在指定寬度和高度的范圍內(nèi)顯示（如果圖片填

2、不滿，就用空白）?？s略圖不是原圖，而是利用原圖實時按照指定大小生成的，他的好處就是你可以充分控制縮略圖的質(zhì)量，寬度高度，文件大小也在合理的范圍內(nèi)，省去漫長等待。本文將討論如何生成縮略圖，舉一反三，又可以派生許多用處，比如，自己寫一個驗證碼控件等。1、理解對圖片的請求和流一般來說，我們用 http:/xxx/a.aspx 對 a.aspx 網(wǎng)頁請求。ASP.NET處理了網(wǎng)頁以后，就把該網(wǎng)頁的內(nèi)容發(fā)送回瀏覽器。a.aspx 的內(nèi)容一般是含有超文本標(biāo)記的文本文件流，這是誰都不會懷疑的。但是 a.aspx 不但能夠返回這種非常平常的網(wǎng)頁文本外，把它廣義開來，它其實可以放回任何類型的流數(shù)據(jù)。而，我們只需

3、要對 Response 對象進(jìn)行操作即可改變輸出流的內(nèi)容。把圖像文件看作是一個二進(jìn)制流，我們試圖從一個圖像文件創(chuàng)建了他的流對象，并且將流寫入到 Response.OutputStream 中，這樣圖像文件就被發(fā)給了請求的瀏覽器。但是瀏覽器還必須要識別出這是一個圖像文件，因此，在發(fā)送這個流之前，將 Response.ContentType 更改成這種圖像文件的 MIME 類型。瀏覽器在收到這個流之后，調(diào)用相關(guān)的應(yīng)用程序，圖像就被顯示在了瀏覽器上。雖然實際地址還是 aspx 結(jié)尾。這樣我們就能很好理解怎么去向用戶發(fā)送標(biāo)記。例如，在一張普通的網(wǎng)頁中寫標(biāo)記 img 標(biāo)記，使他的 src 指向 a.as

4、px。瀏覽器在得到這張網(wǎng)頁后，會處理 img 標(biāo)記的內(nèi)容，并向 a.aspx 發(fā)出請求，這是 a.aspx 作為圖像流返回，瀏覽器就將圖片顯示出來。2、生成縮略圖有了上述技術(shù)基礎(chǔ)，我們可以建立這樣一個空的 aspx 網(wǎng)頁，他通過接受傳入的參數(shù)，生成縮略圖的流，發(fā)送回瀏覽器。我們創(chuàng)建一個名叫 GetThumbnail.aspx 的文件，內(nèi)容如下：這一句 Page 指令僅僅是告訴服務(wù)器，這個文件的隱藏類是_51use.GetThumbnail，而如果我們都不作任何操作的話，這個文件最終輸出時空的。接下來看一下他的隱藏類是如何寫的，在這里我們使用的是 B 語言：程序代碼:Public Class G

5、etThumbnailInherits System.Web.UI.Page#Region Web 窗體設(shè)計器生成的代碼 該調(diào)用是 Web 窗體設(shè)計器所必需的。 Private SubInitializeComponent()End Sub注意: 以下占位符聲明是 Web 窗體設(shè)計器所必需的。不要刪除或移動它。Private designerPlaceholderDeclaration As System.ObjectPrivate Sub Page_Init(ByVal sender As System.Object,歡迎光臨八一學(xué)習(xí)網(wǎng)八一學(xué)習(xí)網(wǎng),收藏本篇文章收藏本篇文章$False$ByV

6、al e As System.EventArgs) Handles MyBase.InitCODEGEN: 此方法調(diào)用是 Web 窗體設(shè)計器所必需的不要使用代碼編輯器修改它。InitializeComponent()End Sub#End RegionPrivate Sub Page_Load(ByVal sender As System.Object, ByVal eAs System.EventArgs) Handles MyBase.Load在此處放置初始化頁的用戶代碼獲取幾個參數(shù)，用以生成縮略圖片設(shè)置一個默認(rèn)參數(shù)生成 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)設(shè)置畫布的描繪質(zhì)量g.CompositingQuality =Drawing2D.CompositingQuality.HighQ

9、ualityg.SmoothingMode = Drawing2D.SmoothingMode.HighQuality本文關(guān)鍵字：本文關(guān)鍵字：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歡迎光臨八一學(xué)習(xí)網(wǎng)八一學(xué)習(xí)網(wǎng),收藏本篇文章收藏本篇文章Response.ContentType = image/jpegEnd If設(shè)置壓縮質(zhì)量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獲得包含有關(guān)內(nèi)置圖像編碼解碼器的信息的 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 事件處理函數(shù)中，先獲取要生成縮略圖的原始文件的路徑，和縮略圖的寬度高度。然后設(shè)置了一個子函數(shù) GetNewSize 用以計算真正縮略圖的大小（為什么還要計算阿？因為縮略圖的寬高比和原始圖片的寬高比不一樣，縮小的圖片要保證比例，按照比例縮小的原始圖片，是按照約束在指定縮略圖寬高范圍內(nèi)的原則，填充不滿的地方使用背景色填補(bǔ)空白。另外，原圖比縮略圖小的話，我們就不

16、做放大，而是按原圖輸出，所以計算是必須的本文關(guān)鍵字：本文關(guān)鍵字：3、使用縮略圖使用縮略圖就變得相對簡單了，只需要在 URL 后附上參數(shù) fn 表示原始文件的位置（相對于根目錄），tw 縮略圖寬度，th 縮略圖高度，下列簡單顯示了在 Repeater 中使用的情景：asp:Repeater id=repWareList runat=server DataSource=imgsrc=http:/ width=120height=120 代碼中藍(lán)色部分就是對該頁請求的 URL，使用語句從數(shù)據(jù)庫獲得路徑和文件名適當(dāng)構(gòu)造成一個有效的請求路徑。工作就算完成了。歡迎光臨八一學(xué)習(xí)網(wǎng)八一學(xué)習(xí)網(wǎng),點(diǎn)擊這里點(diǎn)擊這里查看更多文章教程下面就等著看看縮略圖的效果：后記本文中所述的縮略圖生成法，使用的是流的概念，和文件系統(tǒng)也不沾邊，因此這種方式可以跳過對文件系統(tǒng)權(quán)限檢查，百分之百正確運(yùn)行。當(dāng)然，也可以借助文件系統(tǒng)。另外，根據(jù)上面流輸出的概念，舉一反三，可以弄出很多用法，例如 NeoDynamic 的條形碼控件，你會發(fā)現(xiàn)條形碼圖片的路徑居然就是本頁頁面，他巧妙地將對本頁的請求通過對幾個特征參數(shù)的判定而轉(zhuǎn)向生成圖片流，從而達(dá)到了不添加