隨風設計

??1 ASP.NET圖像處理詳解
??2 ???在使用ASP的時候，我們時常要借助第三方控件來實現一些圖象功能。而現在，ASP.NET的推出，我們已經沒有必要再使用第三方控件來實現，因為ASP.NET?已經具有強大的功能來實現一些圖象處理。現在，我們就來看看怎樣使用ASP.NET的這一強大功能。?
??3
??4 　　?一、System.Drawing的使用?
??5
??6 　　?以下的舉例將演示在內存中生成一張圖片，然后，將這張圖片通過網頁顯示出來。需要了解的是，我們這里輸出的不是HTML效果，而是實實在在的圖片（圖象），我們可以使用“另存為…”將輸出圖象保存起來。?
??7
??8 　　?我們先來看看效果：?
??9
?10 ?
?11 ?　?我們看到，這張圖片是一個漸變背景上有“看見了嗎”幾個字，當然，這個效果在PhotoShop等圖象處理軟件里面很容易實現，但是，一些與數據庫結合的應用我們不可能將所有圖片都事先設計出來，這時候，利用ASP.NET來實現這些功能就顯得很重要了。我們來看源代碼：?
?12
?13 ＜%@?page?language = " vb " ?contenttype = " image/jpeg " ?%＞?
?14 ＜%@?import? Namespace?= namespace = " system.drawing " ?%＞?
?15 ＜%@?import? Namespace?= namespace = " system.drawing.imaging " ?%＞?
?16 ＜%@?import? Namespace?= namespace = " system.drawing.drawing2d " ?%＞?
?17
?18 ＜%?
?19 ' 清空Response?
?20 response.clear?
?21
?22 ' 建立一個120*30大小，24bit的BMP圖象；?
?23 dim ?imgOutput? as ? New ?bitmap( 120 ,? 30 ,?pixelformat.format24bpprgb)?
?24
?25 ' 根據以上BMP建立一個新圖象；?
?26 dim ?g? as ?graphics? = ?graphics.fromimage(imgOutput)?
?27
?28 g.clear(color.Green)?
?29 g.smoothingMode? = ?smoothingMode.antiAlias?
?30
?31 g.drawString( " 看見了嗎？ " ,? New ?font( " 黑體 " , 16 ,fontstyle.bold), new ?SolidBrush(Color.White), New ?pointF( 2 , 4 ))?
?32
?33 g.FillRectangle( New ?linearGradientBrush( New ?point( 0 , 0 ),? New ?point( 120 , 30 ),?color.fromArgb( 0 , 0 , 0 , 0 ),color.fromArgb( 255 , 255 , 255 , 255 )), 0 , 0 , 120 , 30 )?
?34
?35 imgOutput.save(response.outputstream,?imageformat.jpeg)?
?36
?37 g.dispose()?
?38 imgOutput.dispose()?
?39 response.end?
?40 %＞?
?41
?42
?43 　　?在以上代碼中，我們看到和數據庫程序不同，這里專門引入了圖象處理的名字空間system.drawing等。程序首先清空了Response，確保沒有輸出；然后，程序建立了一個120乘30大的BMP圖象，再在這個基礎上建立一個新圖象，建立圖象以后，我們首先“畫”出了字符串“看見了嗎”，該字符串為16大粗黑體，顏色為白色，位置為（ 2 ， 4 ）；最后，我們實現漸變效果。?
?44
?45 　　?以上舉例很簡單，但是如果和數據庫結合，我們可以實現很多使用ASP可能不敢想的效果。?
?46 二、讀取和改變圖象文件大小?
?47
?48 　　?讀取圖片？直接使用HTML不就可以了？當然可以，我們這里只是提供一種選擇和方法來實現這一功能，具體這一功能的使用，我們可能需要在實踐中更多的學習。先來看程序源代碼：?
?49
?50 ＜%? ' ?import?all?relevant?namespaces?%＞?
?51 ＜%@?import? Namespace?= namespace = " System " ?%＞?
?52 ＜%@?import? Namespace?= namespace = " System.Drawing " ?%＞?
?53 ＜%@?import? Namespace?= namespace = " System.Drawing.Imaging " ?%＞?
?54 ＜%@?import? Namespace?= namespace = " System.IO " ?%＞?
?55
?56 ＜script?runat = " server " ＞?
?57 Sub?sendFile() Sub ?sendFile()?
?58 dim ?g? as ?System.Drawing.Image? = ?System.Drawing.Image.FromFile(server.mappath(request( " src " )))?
?59 dim ?thisFormat = g.rawformat?
?60 dim ?imgOutput? as ? New ?Bitmap(g,? cint (request( " width " )),? cint (request( " height " )))?
?61 if ?thisformat.equals(system.drawing.imaging.imageformat.Gif)? then ?
?62 response.contenttype = " image/gif " ?
?63 else ?
?64 response.contenttype = " image/jpeg " ?
?65 end ? if ?
?66 imgOutput.save(response.outputstream,?thisformat)?
?67 g.dispose()?
?68 imgOutput.dispose()?
?69 end?sub ?
?70
?71 Sub?sendError() Sub ?sendError()?
?72 dim ?imgOutput? as ? New ?bitmap( 120 ,? 120 ,?pixelformat.format24bpprgb)?
?73 dim ?g? as ?graphics? = ?graphics.fromimage(imgOutput)?
?74 g.clear(color.yellow)?
?75 g.drawString( " 錯誤！ " ,? New ?font( " 黑體 " , 14 ,fontstyle.bold),systembrushes.windowtext,? New ?pointF( 2 , 2 ))?
?76 response.contenttype = " image/gif " ?
?77 imgOutput.save(response.outputstream,?imageformat.gif)?
?78 g.dispose()?
?79 imgOutput.dispose()?
?80 end?sub ?
?81 ＜ / script＞?
?82
?83 ＜%?
?84 response.clear?
?85 if ?request( " src " ) = "" ? or ?request( " height " ) = "" ? or ?request( " width " ) = "" ? then ?
?86 call ?sendError()?
?87 else ?
?88 if ?file.exists(server.mappath(request( " src " )))? then ?
?89 call ?sendFile()?
?90 else ?
?91 call ?sendError()?
?92 end ? if ?
?93 end ? if ?
?94 response.end?
?95 %＞?
?96
?97 　　?在以上的程序中，我們看到兩個函數，一個是SendFile，這一函數主要功能為顯示服務器上的圖片，該圖片的大小通過Width和Height設置，同時，程序會自動檢測圖片類型；另外一個是SendError，這一函數的主要功能為服務器上的圖片文件不存在時，顯示錯誤信息，這里很有趣，錯誤信息也是通過圖片給出的（如圖）：?
?98
?99 ?
100 以上的程序顯示圖片并且改變圖片大小，現在，我們將這個程序進一步，顯示圖片并且保持圖片的長寬比例，這樣，和實際應用可能比較接近，特別是需要制作電子相冊或者是圖片網站的時候比較實用。我們先來看主要函數：?
101
102 Function?NewthumbSize() Function ?NewthumbSize(currentwidth,?currentheight)?
103 dim ?tempMultiplier? as ? Double ?
104 if ?currentheight?＞?currentwidth? then ?
105 tempMultiplier? = ? 200 ? / ?currentheight?
106 Else ?
107 tempMultiplier? = ? 200 ? / ?currentwidth?
108 end ? if ?
109 dim ?NewSize? as ? New ?Size( CInt (currentwidth? * ?tempMultiplier),? CInt (currentheight? * ?tempMultiplier))?
110 return ?NewSize?
111 End?Function ?
112
113
114 　　?以上程序是增加的一個函數NewthumbSize，該函數專門處理改變一會的圖片大小，這個圖片的長寬和原圖片的長寬保持相同比例。其他部分請參考上文程序代碼。?
115 三、畫圖特效?
116
117 　　?如果只是將圖片顯示在網頁上，這樣未免顯得簡單。現在，我們來進一步感受ASP.NET的強大功能。我們將學習圖象處理中常用的圖象反轉、圖象切割、圖象拉伸等技巧。?
118 先來看看程序效果：?
119
120 ?
121 ?仔細看，我們可以找到各種圖象處理效果。現在，我們來看看程序代碼：?
122
123 ＜%@?Page?Language = " vb " ?Debug = " True " ?%＞?
124 ＜%@?import? Namespace?= namespace = " system.drawing " ?%＞?
125 ＜%@?import? Namespace?= namespace = " system.drawing.imaging " ?%＞?
126 ＜%@?import? Namespace?= namespace = " system.drawing.drawing2d " ?%＞?
127 ＜%?
128 dim ?strFilename? as ? string ?
129 dim ?i? as ?System.Drawing.Image?
130 strFilename? = ?server.mappath( " ./chris-fsck.jpg " )?
131
132 i? = ?System.Drawing.Image.FromFile(strFilename)?
133
134 dim ?b? as ? New ?system.drawing.bitmap(i.width,?i.height,?pixelformat.format24bpprgb)?
135 dim ?g? as ?graphics? = ?graphics.fromimage(b)?
136
137 g.clear(color.blue)?
138
139 ' 旋轉圖片?
140 i.RotateFlip(System.Drawing.RotateFlipType.Rotate90FlipX)?
141 g.drawimage(i, New ?point( 0 , 0 ))?
142 i.RotateFlip(System.Drawing.RotateFlipType.Rotate270FlipY)?
143
144 g.RotateTransform( 10 )?
145 g.drawimage(i, New ?point( 0 , 0 ))?
146 g.RotateTransform( 10 )?
147 g.drawimage(i, New ?point( 20 , 20 ))?
148 g.RotateTransform( 10 )?
149 g.drawimage(i, New ?point( 40 , 40 ))?
150 g.RotateTransform( 10 )?
151 g.drawimage(i, New ?point( 40 , 40 ))?
152 g.RotateTransform( - 40 )?
153 g.RotateTransform( 90 )?
154 g.drawimage(i, New ?rectangle( 100 , - 400 , 100 , 50 ), New ?rectangle( 20 , 20 ,i.width - 20 ,i.height - 20 ),GraphicsUnit.Pixel)?
155 g.RotateTransform( - 90 )?
156
157 ' ?拉伸圖片?
158 g.drawimage(i, New ?rectangle( 10 , 10 , 50 , 50 ), New ?rectangle( 20 , 20 ,i.width - 20 ,i.height - 20 ),GraphicsUnit.Pixel)?
159 g.drawimage(i, New ?rectangle( 50 , 10 , 90 , 50 ), New ?rectangle( 20 , 20 ,i.width - 20 ,i.height - 20 ),GraphicsUnit.Pixel)?
160 g.drawimage(i, New ?rectangle( 110 , 10 , 150 , 50 ), New ?rectangle( 20 , 20 ,i.width - 20 ,i.height - 20 ),GraphicsUnit.Pixel)?
161
162
163 ' 切割圖片?
164 g.drawimage(i, 50 , 100 , New ?rectangle( 180 , 80 , 60 , 110 ),GraphicsUnit.Pixel)?
165 g.drawimage(i, 140 , 100 , New ?rectangle( 180 , 80 , 60 , 110 ),GraphicsUnit.Pixel)?
166
167 ' 旋轉圖片?
168 i.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipX)?
169 g.drawimage(i, 230 , 100 , New ?rectangle( 180 , 110 , 60 , 110 ),GraphicsUnit.Pixel)?
170
171 response.contenttype = " image/jpeg " ?
172
173 b.save(response.outputstream,?imageformat.jpeg)?
174
175 b.dispose()?
176
177 %＞?
178
179
180 　　?在以上的程序中，我們看到實現圖象處理的各種技巧，仔細觀察，我們可以知道旋轉圖片其實是用了一個RotateFlip方法；而切割和拉伸圖片，完全是通過設置DrawImage的不同參數來實現。?
181
182 　　?四、總結?
183
184 　　?ASP.NET的圖象處理可以實現的功能很多，我們在這里其實只是簡單的介紹，更多功能的應用，需要我們在實踐中摸索、總結。
185
186 點擊數： 141 ????更新時間： 2006 - 4 - 26