隨風(fēng)設(shè)計(jì)

??1 ASP.NET圖像處理詳解
??2 ???在使用ASP的時(shí)候，我們時(shí)常要借助第三方控件來(lái)實(shí)現(xiàn)一些圖象功能。而現(xiàn)在，ASP.NET的推出，我們已經(jīng)沒(méi)有必要再使用第三方控件來(lái)實(shí)現(xiàn)，因?yàn)锳SP.NET?已經(jīng)具有強(qiáng)大的功能來(lái)實(shí)現(xiàn)一些圖象處理。現(xiàn)在，我們就來(lái)看看怎樣使用ASP.NET的這一強(qiáng)大功能。?
??3
??4 　　?一、System.Drawing的使用?
??5
??6 　　?以下的舉例將演示在內(nèi)存中生成一張圖片，然后，將這張圖片通過(guò)網(wǎng)頁(yè)顯示出來(lái)。需要了解的是，我們這里輸出的不是HTML效果，而是實(shí)實(shí)在在的圖片（圖象），我們可以使用“另存為…”將輸出圖象保存起來(lái)。?
??7
??8 　　?我們先來(lái)看看效果：?
??9
?10 ?
?11 ?　?我們看到，這張圖片是一個(gè)漸變背景上有“看見(jiàn)了嗎”幾個(gè)字，當(dāng)然，這個(gè)效果在PhotoShop等圖象處理軟件里面很容易實(shí)現(xiàn)，但是，一些與數(shù)據(jù)庫(kù)結(jié)合的應(yīng)用我們不可能將所有圖片都事先設(shè)計(jì)出來(lái)，這時(shí)候，利用ASP.NET來(lái)實(shí)現(xiàn)這些功能就顯得很重要了。我們來(lái)看源代碼：?
?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 ' 建立一個(gè)120*30大小，24bit的BMP圖象；?
?23 dim ?imgOutput? as ? New ?bitmap( 120 ,? 30 ,?pixelformat.format24bpprgb)?
?24
?25 ' 根據(jù)以上BMP建立一個(gè)新圖象；?
?26 dim ?g? as ?graphics? = ?graphics.fromimage(imgOutput)?
?27
?28 g.clear(color.Green)?
?29 g.smoothingMode? = ?smoothingMode.antiAlias?
?30
?31 g.drawString( " 看見(jiàn)了嗎？ " ,? 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 　　?在以上代碼中，我們看到和數(shù)據(jù)庫(kù)程序不同，這里專門(mén)引入了圖象處理的名字空間system.drawing等。程序首先清空了Response，確保沒(méi)有輸出；然后，程序建立了一個(gè)120乘30大的BMP圖象，再在這個(gè)基礎(chǔ)上建立一個(gè)新圖象，建立圖象以后，我們首先“畫(huà)”出了字符串“看見(jiàn)了嗎”，該字符串為16大粗黑體，顏色為白色，位置為（ 2 ， 4 ）；最后，我們實(shí)現(xiàn)漸變效果。?
?44
?45 　　?以上舉例很簡(jiǎn)單，但是如果和數(shù)據(jù)庫(kù)結(jié)合，我們可以實(shí)現(xiàn)很多使用ASP可能不敢想的效果。?
?46 二、讀取和改變圖象文件大小?
?47
?48 　　?讀取圖片？直接使用HTML不就可以了？當(dāng)然可以，我們這里只是提供一種選擇和方法來(lái)實(shí)現(xiàn)這一功能，具體這一功能的使用，我們可能需要在實(shí)踐中更多的學(xué)習(xí)。先來(lái)看程序源代碼：?
?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( " 錯(cuò)誤！ " ,? 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 　　?在以上的程序中，我們看到兩個(gè)函數(shù)，一個(gè)是SendFile，這一函數(shù)主要功能為顯示服務(wù)器上的圖片，該圖片的大小通過(guò)Width和Height設(shè)置，同時(shí)，程序會(huì)自動(dòng)檢測(cè)圖片類型；另外一個(gè)是SendError，這一函數(shù)的主要功能為服務(wù)器上的圖片文件不存在時(shí)，顯示錯(cuò)誤信息，這里很有趣，錯(cuò)誤信息也是通過(guò)圖片給出的（如圖）：?
?98
?99 ?
100 以上的程序顯示圖片并且改變圖片大小，現(xiàn)在，我們將這個(gè)程序進(jìn)一步，顯示圖片并且保持圖片的長(zhǎng)寬比例，這樣，和實(shí)際應(yīng)用可能比較接近，特別是需要制作電子相冊(cè)或者是圖片網(wǎng)站的時(shí)候比較實(shí)用。我們先來(lái)看主要函數(shù)：?
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 　　?以上程序是增加的一個(gè)函數(shù)NewthumbSize，該函數(shù)專門(mén)處理改變一會(huì)的圖片大小，這個(gè)圖片的長(zhǎng)寬和原圖片的長(zhǎng)寬保持相同比例。其他部分請(qǐng)參考上文程序代碼。?
115 三、畫(huà)圖特效?
116
117 　　?如果只是將圖片顯示在網(wǎng)頁(yè)上，這樣未免顯得簡(jiǎn)單。現(xiàn)在，我們來(lái)進(jìn)一步感受ASP.NET的強(qiáng)大功能。我們將學(xué)習(xí)圖象處理中常用的圖象反轉(zhuǎn)、圖象切割、圖象拉伸等技巧。?
118 先來(lái)看看程序效果：?
119
120 ?
121 ?仔細(xì)看，我們可以找到各種圖象處理效果。現(xiàn)在，我們來(lái)看看程序代碼：?
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 ' 旋轉(zhuǎn)圖片?
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 ' 旋轉(zhuǎn)圖片?
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 　　?在以上的程序中，我們看到實(shí)現(xiàn)圖象處理的各種技巧，仔細(xì)觀察，我們可以知道旋轉(zhuǎn)圖片其實(shí)是用了一個(gè)RotateFlip方法；而切割和拉伸圖片，完全是通過(guò)設(shè)置DrawImage的不同參數(shù)來(lái)實(shí)現(xiàn)。?
181
182 　　?四、總結(jié)?
183
184 　　?ASP.NET的圖象處理可以實(shí)現(xiàn)的功能很多，我們?cè)谶@里其實(shí)只是簡(jiǎn)單的介紹，更多功能的應(yīng)用，需要我們?cè)趯?shí)踐中摸索、總結(jié)。
185
186 點(diǎn)擊數(shù)： 141 ????更新時(shí)間： 2006 - 4 - 26