前言
需求源自項目中的一些應用,比如相冊功能,通常用戶上傳相片后我們都會針對該相片再生成一張縮略圖,用于其它頁面上的列表顯示。隨便看一下,大部分網站基本都是將原圖等比縮放來生成縮略圖。但完美主義者會發現一些問題,比如顯示排版時想讓相片縮略圖列表非常統一、整齊、和美觀,比如要求每張縮略圖大小固定為120 x 90且不拉伸變形怎么辦?再比如用戶頭像如何讓縮略圖比原圖更清晰?或是如何在上傳的圖片下加一個半透明的logo水印?
ok,本文根據自己的項目代碼描述以上問題的解決方案,全部基于.net framework類庫完成,代碼中包含了c#圖片處理的一些基礎知識,與大家分享,個人能力有限,不足之處還請及時指正。
提高縮略圖清晰度
(原圖200*200,12.3k)
(處理后80*80,17.7k)
之前一直認為縮略圖不可能比原圖清晰,直到某天一位產品的同事給我看某網站的效果。于是開始尋找.net下實現代碼,仔細觀察縮略圖確實比原圖更清晰了一些,但代價是縮略圖文件比原圖更大,所以如果你想讓一張占滿顯示器屏幕的超大圖片更清晰,那么圖片占用空間和網絡流量就必需考慮了,如果是互聯網應用,建議縮略圖在200像素以內的使用該方法。當然如果哪位有更好的代碼即能讓圖片文件大小變化不大又讓圖片更清晰還請分享。
圖片裁剪
(原圖256*192)
(裁剪要求100*100)
(原圖256*192)
(裁剪要求90*120)
(原圖256*192)
(裁剪要求120*90)
(原圖146*256)
(裁剪要求100*100)
(原圖146*256)
(裁剪要求90*120)
(原圖146*256)
(裁剪要求120*90)
算法:以原圖中心作為裁剪中心,最大范圍的對原圖進行裁剪,然后對裁剪結果等比縮放。
圖片水印
僅演示了效果,如需要變更字體、水印透明度、位置等可自行在代碼或方法中擴展。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
|
using system; using system.collections.generic; using system.text; using system.io; using system.drawing; using system.drawing.drawing2d; using system.drawing.imaging; namespace wujian.common { /// <summary> /// 圖片處理 /// http://www.cnblogs.com/wu-jian/ /// /// 吳劍 2011-02-20 創建 /// 吳劍 2012-08-08 修改 /// </summary> public class image { #region 正方型裁剪并縮放 /// <summary> /// 正方型裁剪 /// 以圖片中心為軸心,截取正方型,然后等比縮放 /// 用于頭像處理 /// </summary> /// <remarks>吳劍 2012-08-08</remarks> /// <param name="fromfile">原圖stream對象</param> /// <param name="filesaveurl">縮略圖存放地址</param> /// <param name="side">指定的邊長(正方型)</param> /// <param name="quality">質量(范圍0-100)</param> public static void cutforsquare(system.io.stream fromfile, string filesaveurl, int side, int quality) { //創建目錄 string dir = path.getdirectoryname(filesaveurl); if (!directory.exists(dir)) directory.createdirectory(dir); //原始圖片(獲取原始圖片創建對象,并使用流中嵌入的顏色管理信息) system.drawing.image initimage = system.drawing.image.fromstream(fromfile, true ); //原圖寬高均小于模版,不作處理,直接保存 if (initimage.width <= side && initimage.height <= side) { initimage.save(filesaveurl, system.drawing.imaging.imageformat.jpeg); } else { //原始圖片的寬、高 int initwidth = initimage.width; int initheight = initimage.height; //非正方型先裁剪為正方型 if (initwidth != initheight) { //截圖對象 system.drawing.image pickedimage = null ; system.drawing.graphics pickedg = null ; //寬大于高的橫圖 if (initwidth > initheight) { //對象實例化 pickedimage = new system.drawing.bitmap(initheight, initheight); pickedg = system.drawing.graphics.fromimage(pickedimage); //設置質量 pickedg.interpolationmode = system.drawing.drawing2d.interpolationmode.highqualitybicubic; pickedg.smoothingmode = system.drawing.drawing2d.smoothingmode.highquality; //定位 rectangle fromr = new rectangle((initwidth - initheight) / 2, 0, initheight, initheight); rectangle tor = new rectangle(0, 0, initheight, initheight); //畫圖 pickedg.drawimage(initimage, tor, fromr, system.drawing.graphicsunit.pixel); //重置寬 initwidth = initheight; } //高大于寬的豎圖 else { //對象實例化 pickedimage = new system.drawing.bitmap(initwidth, initwidth); pickedg = system.drawing.graphics.fromimage(pickedimage); //設置質量 pickedg.interpolationmode = system.drawing.drawing2d.interpolationmode.highqualitybicubic; pickedg.smoothingmode = system.drawing.drawing2d.smoothingmode.highquality; //定位 rectangle fromr = new rectangle(0, (initheight - initwidth) / 2, initwidth, initwidth); rectangle tor = new rectangle(0, 0, initwidth, initwidth); //畫圖 pickedg.drawimage(initimage, tor, fromr, system.drawing.graphicsunit.pixel); //重置高 initheight = initwidth; } //將截圖對象賦給原圖 initimage = (system.drawing.image)pickedimage.clone(); //釋放截圖資源 pickedg.dispose(); pickedimage.dispose(); } //縮略圖對象 system.drawing.image resultimage = new system.drawing.bitmap(side, side); system.drawing.graphics resultg = system.drawing.graphics.fromimage(resultimage); //設置質量 resultg.interpolationmode = system.drawing.drawing2d.interpolationmode.highqualitybicubic; resultg.smoothingmode = system.drawing.drawing2d.smoothingmode.highquality; //用指定背景色清空畫布 resultg.clear(color.white); //繪制縮略圖 resultg.drawimage(initimage, new system.drawing.rectangle(0, 0, side, side), new system.drawing.rectangle(0, 0, initwidth, initheight), system.drawing.graphicsunit.pixel); //關鍵質量控制 //獲取系統編碼類型數組,包含了jpeg,bmp,png,gif,tiff imagecodecinfo[] icis = imagecodecinfo.getimageencoders(); imagecodecinfo ici = null ; foreach (imagecodecinfo i in icis) { if (i.mimetype == "image/jpeg" || i.mimetype == "image/bmp" || i.mimetype == "image/png" || i.mimetype == "image/gif" ) { ici = i; } } encoderparameters ep = new encoderparameters(1); ep.param[0] = new encoderparameter(system.drawing.imaging.encoder.quality, ( long )quality); //保存縮略圖 resultimage.save(filesaveurl, ici, ep); //釋放關鍵質量控制所用資源 ep.dispose(); //釋放縮略圖資源 resultg.dispose(); resultimage.dispose(); //釋放原始圖片資源 initimage.dispose(); } } #endregion #region 自定義裁剪并縮放 /// <summary> /// 指定長寬裁剪 /// 按模版比例最大范圍的裁剪圖片并縮放至模版尺寸 /// </summary> /// <remarks>吳劍 2012-08-08</remarks> /// <param name="fromfile">原圖stream對象</param> /// <param name="filesaveurl">保存路徑</param> /// <param name="maxwidth">最大寬(單位:px)</param> /// <param name="maxheight">最大高(單位:px)</param> /// <param name="quality">質量(范圍0-100)</param> public static void cutforcustom(system.io.stream fromfile, string filesaveurl, int maxwidth, int maxheight, int quality) { //從文件獲取原始圖片,并使用流中嵌入的顏色管理信息 system.drawing.image initimage = system.drawing.image.fromstream(fromfile, true ); //原圖寬高均小于模版,不作處理,直接保存 if (initimage.width <= maxwidth && initimage.height <= maxheight) { initimage.save(filesaveurl, system.drawing.imaging.imageformat.jpeg); } else { //模版的寬高比例 double templaterate = ( double )maxwidth / maxheight; //原圖片的寬高比例 double initrate = ( double )initimage.width / initimage.height; //原圖與模版比例相等,直接縮放 if (templaterate == initrate) { //按模版大小生成最終圖片 system.drawing.image templateimage = new system.drawing.bitmap(maxwidth, maxheight); system.drawing.graphics templateg = system.drawing.graphics.fromimage(templateimage); templateg.interpolationmode = system.drawing.drawing2d.interpolationmode.high; templateg.smoothingmode = system.drawing.drawing2d.smoothingmode.highquality; templateg.clear(color.white); templateg.drawimage(initimage, new system.drawing.rectangle(0, 0, maxwidth, maxheight), new system.drawing.rectangle(0, 0, initimage.width, initimage.height), system.drawing.graphicsunit.pixel); templateimage.save(filesaveurl, system.drawing.imaging.imageformat.jpeg); } //原圖與模版比例不等,裁剪后縮放 else { //裁剪對象 system.drawing.image pickedimage = null ; system.drawing.graphics pickedg = null ; //定位 rectangle fromr = new rectangle(0, 0, 0, 0); //原圖裁剪定位 rectangle tor = new rectangle(0, 0, 0, 0); //目標定位 //寬為標準進行裁剪 if (templaterate > initrate) { //裁剪對象實例化 pickedimage = new system.drawing.bitmap(initimage.width, ( int )system.math.floor(initimage.width / templaterate)); pickedg = system.drawing.graphics.fromimage(pickedimage); //裁剪源定位 fromr.x = 0; fromr.y = ( int )system.math.floor((initimage.height - initimage.width / templaterate) / 2); fromr.width = initimage.width; fromr.height = ( int )system.math.floor(initimage.width / templaterate); //裁剪目標定位 tor.x = 0; tor.y = 0; tor.width = initimage.width; tor.height = ( int )system.math.floor(initimage.width / templaterate); } //高為標準進行裁剪 else { pickedimage = new system.drawing.bitmap(( int )system.math.floor(initimage.height * templaterate), initimage.height); pickedg = system.drawing.graphics.fromimage(pickedimage); fromr.x = ( int )system.math.floor((initimage.width - initimage.height * templaterate) / 2); fromr.y = 0; fromr.width = ( int )system.math.floor(initimage.height * templaterate); fromr.height = initimage.height; tor.x = 0; tor.y = 0; tor.width = ( int )system.math.floor(initimage.height * templaterate); tor.height = initimage.height; } //設置質量 pickedg.interpolationmode = system.drawing.drawing2d.interpolationmode.highqualitybicubic; pickedg.smoothingmode = system.drawing.drawing2d.smoothingmode.highquality; //裁剪 pickedg.drawimage(initimage, tor, fromr, system.drawing.graphicsunit.pixel); //按模版大小生成最終圖片 system.drawing.image templateimage = new system.drawing.bitmap(maxwidth, maxheight); system.drawing.graphics templateg = system.drawing.graphics.fromimage(templateimage); templateg.interpolationmode = system.drawing.drawing2d.interpolationmode.high; templateg.smoothingmode = system.drawing.drawing2d.smoothingmode.highquality; templateg.clear(color.white); templateg.drawimage(pickedimage, new system.drawing.rectangle(0, 0, maxwidth, maxheight), new system.drawing.rectangle(0, 0, pickedimage.width, pickedimage.height), system.drawing.graphicsunit.pixel); //關鍵質量控制 //獲取系統編碼類型數組,包含了jpeg,bmp,png,gif,tiff imagecodecinfo[] icis = imagecodecinfo.getimageencoders(); imagecodecinfo ici = null ; foreach (imagecodecinfo i in icis) { if (i.mimetype == "image/jpeg" || i.mimetype == "image/bmp" || i.mimetype == "image/png" || i.mimetype == "image/gif" ) { ici = i; } } encoderparameters ep = new encoderparameters(1); ep.param[0] = new encoderparameter(system.drawing.imaging.encoder.quality, ( long )quality); //保存縮略圖 templateimage.save(filesaveurl, ici, ep); //templateimage.save(filesaveurl, system.drawing.imaging.imageformat.jpeg); //釋放資源 templateg.dispose(); templateimage.dispose(); pickedg.dispose(); pickedimage.dispose(); } } //釋放資源 initimage.dispose(); } #endregion #region 等比縮放 /// <summary> /// 圖片等比縮放 /// </summary> /// <remarks>吳劍 2012-08-08</remarks> /// <param name="fromfile">原圖stream對象</param> /// <param name="savepath">縮略圖存放地址</param> /// <param name="targetwidth">指定的最大寬度</param> /// <param name="targetheight">指定的最大高度</param> /// <param name="watermarktext">水印文字(為""表示不使用水印)</param> /// <param name="watermarkimage">水印圖片路徑(為""表示不使用水印)</param> public static void zoomauto(system.io.stream fromfile, string savepath, system. double targetwidth, system. double targetheight, string watermarktext, string watermarkimage) { //創建目錄 string dir = path.getdirectoryname(savepath); if (!directory.exists(dir)) directory.createdirectory(dir); //原始圖片(獲取原始圖片創建對象,并使用流中嵌入的顏色管理信息) system.drawing.image initimage = system.drawing.image.fromstream(fromfile, true ); //原圖寬高均小于模版,不作處理,直接保存 if (initimage.width <= targetwidth && initimage.height <= targetheight) { //文字水印 if (watermarktext != "" ) { using (system.drawing.graphics gwater = system.drawing.graphics.fromimage(initimage)) { system.drawing.font fontwater = new font( "黑體" , 10); system.drawing.brush brushwater = new solidbrush(color.white); gwater.drawstring(watermarktext, fontwater, brushwater, 10, 10); gwater.dispose(); } } //透明圖片水印 if (watermarkimage != "" ) { if (file.exists(watermarkimage)) { //獲取水印圖片 using (system.drawing.image wrimage = system.drawing.image.fromfile(watermarkimage)) { //水印繪制條件:原始圖片寬高均大于或等于水印圖片 if (initimage.width >= wrimage.width && initimage.height >= wrimage.height) { graphics gwater = graphics.fromimage(initimage); //透明屬性 imageattributes imgattributes = new imageattributes(); colormap colormap = new colormap(); colormap.oldcolor = color.fromargb(255, 0, 255, 0); colormap.newcolor = color.fromargb(0, 0, 0, 0); colormap[] remaptable = { colormap }; imgattributes.setremaptable(remaptable, coloradjusttype.bitmap); float [][] colormatrixelements = { new float [] {1.0f, 0.0f, 0.0f, 0.0f, 0.0f}, new float [] {0.0f, 1.0f, 0.0f, 0.0f, 0.0f}, new float [] {0.0f, 0.0f, 1.0f, 0.0f, 0.0f}, new float [] {0.0f, 0.0f, 0.0f, 0.5f, 0.0f}, //透明度:0.5 new float [] {0.0f, 0.0f, 0.0f, 0.0f, 1.0f} }; colormatrix wmcolormatrix = new colormatrix(colormatrixelements); imgattributes.setcolormatrix(wmcolormatrix, colormatrixflag. default , coloradjusttype.bitmap); gwater.drawimage(wrimage, new rectangle(initimage.width - wrimage.width, initimage.height - wrimage.height, wrimage.width, wrimage.height), 0, 0, wrimage.width, wrimage.height, graphicsunit.pixel, imgattributes); gwater.dispose(); } wrimage.dispose(); } } } //保存 initimage.save(savepath, system.drawing.imaging.imageformat.jpeg); } else { //縮略圖寬、高計算 double newwidth = initimage.width; double newheight = initimage.height; //寬大于高或寬等于高(橫圖或正方) if (initimage.width > initimage.height || initimage.width == initimage.height) { //如果寬大于模版 if (initimage.width > targetwidth) { //寬按模版,高按比例縮放 newwidth = targetwidth; newheight = initimage.height * (targetwidth / initimage.width); } } //高大于寬(豎圖) else { //如果高大于模版 if (initimage.height > targetheight) { //高按模版,寬按比例縮放 newheight = targetheight; newwidth = initimage.width * (targetheight / initimage.height); } } //生成新圖 //新建一個bmp圖片 system.drawing.image newimage = new system.drawing.bitmap(( int )newwidth, ( int )newheight); //新建一個畫板 system.drawing.graphics newg = system.drawing.graphics.fromimage(newimage); //設置質量 newg.interpolationmode = system.drawing.drawing2d.interpolationmode.highqualitybicubic; newg.smoothingmode = system.drawing.drawing2d.smoothingmode.highquality; //置背景色 newg.clear(color.white); //畫圖 newg.drawimage(initimage, new system.drawing.rectangle(0, 0, newimage.width, newimage.height), new system.drawing.rectangle(0, 0, initimage.width, initimage.height), system.drawing.graphicsunit.pixel); //文字水印 if (watermarktext != "" ) { using (system.drawing.graphics gwater = system.drawing.graphics.fromimage(newimage)) { system.drawing.font fontwater = new font( "宋體" , 10); system.drawing.brush brushwater = new solidbrush(color.white); gwater.drawstring(watermarktext, fontwater, brushwater, 10, 10); gwater.dispose(); } } //透明圖片水印 if (watermarkimage != "" ) { if (file.exists(watermarkimage)) { //獲取水印圖片 using (system.drawing.image wrimage = system.drawing.image.fromfile(watermarkimage)) { //水印繪制條件:原始圖片寬高均大于或等于水印圖片 if (newimage.width >= wrimage.width && newimage.height >= wrimage.height) { graphics gwater = graphics.fromimage(newimage); //透明屬性 imageattributes imgattributes = new imageattributes(); colormap colormap = new colormap(); colormap.oldcolor = color.fromargb(255, 0, 255, 0); colormap.newcolor = color.fromargb(0, 0, 0, 0); colormap[] remaptable = { colormap }; imgattributes.setremaptable(remaptable, coloradjusttype.bitmap); float [][] colormatrixelements = { new float [] {1.0f, 0.0f, 0.0f, 0.0f, 0.0f}, new float [] {0.0f, 1.0f, 0.0f, 0.0f, 0.0f}, new float [] {0.0f, 0.0f, 1.0f, 0.0f, 0.0f}, new float [] {0.0f, 0.0f, 0.0f, 0.5f, 0.0f}, //透明度:0.5 new float [] {0.0f, 0.0f, 0.0f, 0.0f, 1.0f} }; colormatrix wmcolormatrix = new colormatrix(colormatrixelements); imgattributes.setcolormatrix(wmcolormatrix, colormatrixflag. default , coloradjusttype.bitmap); gwater.drawimage(wrimage, new rectangle(newimage.width - wrimage.width, newimage.height - wrimage.height, wrimage.width, wrimage.height), 0, 0, wrimage.width, wrimage.height, graphicsunit.pixel, imgattributes); gwater.dispose(); } wrimage.dispose(); } } } //保存縮略圖 newimage.save(savepath, system.drawing.imaging.imageformat.jpeg); //釋放資源 newg.dispose(); newimage.dispose(); initimage.dispose(); } } #endregion #region 其它 /// <summary> /// 判斷文件類型是否為web格式圖片 /// (注:jpg,gif,bmp,png) /// </summary> /// <param name="contenttype">httppostedfile.contenttype</param> /// <returns></returns> public static bool iswebimage( string contenttype) { if (contenttype == "image/pjpeg" || contenttype == "image/jpeg" || contenttype == "image/gif" || contenttype == "image/bmp" || contenttype == "image/png" ) { return true ; } else { return false ; } } #endregion } //end class } |
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持服務器之家。
原文鏈接:http://www.cnblogs.com/wu-jian/archive/2011/02/21/1959382.html