项目总结(图片缩小,点击上移下移,点击弹出图片放大显示)
本周周三的时候老师说潮州一个叫李冰的作家个人网站的源码丢了,让我帮她复原一下.给了我三天时间,苦逼啊!虽然功能不多,但是中间还是有很多没有做过
http://www.libing123.com/login/adminlogin.aspx
http://www.libing123.com/这是当时挂在外网的网址
我一天加一个晚上把关键功能全部实现了!那一整天痛苦啊,做了有13多个小时!苦逼啊!不过哭中甘来!发现在做项目的过程中能够学的更快,学的更多!
下面我主要总结一下在这次项目中的一些关键技术:
一:图片缩图功能
主要是一个类库:大家可以参考参考(.net中有内置的缩图类,当时注意了:它会使图片变形,而且会死的很难看)
View Code
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.IO; 6 using System.Drawing; 7 using System.Drawing.Drawing2D; 8 using System.Drawing.Imaging; 9 10 namespace Common 11 { 12 public class PicControl 13 { 14 #region 01.图片加水印文字 +void AddWaterText(string oldpath, string text, string newpath, int alpha, int fontSize) 15 /// <summary> 16 /// 图片加水印文字 17 /// </summary> 18 /// <param name="oldpath">旧图片地址(绝对路径)</param> 19 /// <param name="text">水印文字</param> 20 /// <param name="newpath">新图片地址(绝对路径)</param> 21 /// <param name="Alpha">透明度</param> 22 /// <param name="fontsize">字体大小</param> 23 public static void AddWaterText(string oldpath, string text, string newpath, int alpha, int fontSize) 24 { 25 text = text + "版权所有"; 26 FileStream fs = new FileStream(HttpContext.Current.Server.MapPath(oldpath), FileMode.Open); 27 BinaryReader br = new BinaryReader(fs); 28 byte[] bytes = br.ReadBytes((int)fs.Length); 29 br.Close(); 30 fs.Close(); 31 MemoryStream ms = new MemoryStream(bytes); 32 33 System.Drawing.Image imgPhoto = System.Drawing.Image.FromStream(ms); 34 int imgPhotoWidth = imgPhoto.Width; 35 int imgPhotoHeight = imgPhoto.Height; 36 37 Bitmap bmPhoto = new Bitmap(imgPhotoWidth, imgPhotoHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb); 38 39 bmPhoto.SetResolution(72, 72); 40 Graphics gbmPhoto = Graphics.FromImage(bmPhoto); 41 42 //gif背景色 43 gbmPhoto.Clear(Color.FromName("white")); 44 gbmPhoto.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; 45 gbmPhoto.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; 46 gbmPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, imgPhotoWidth, imgPhotoHeight), 0, 0, imgPhotoWidth, imgPhotoHeight, GraphicsUnit.Pixel); 47 System.Drawing.Font font = null; 48 System.Drawing.SizeF crSize = new SizeF(); 49 font = new Font("宋体", fontSize, FontStyle.Bold); 50 51 //测量指定区域 52 crSize = gbmPhoto.MeasureString(text, font); 53 float y = imgPhotoHeight - crSize.Height; 54 float x = imgPhotoWidth - crSize.Width; 55 System.Drawing.StringFormat StrFormat = new System.Drawing.StringFormat(); 56 StrFormat.Alignment = System.Drawing.StringAlignment.Center; 57 58 //画两次制造透明效果 59 System.Drawing.SolidBrush semiTransBrush2 = new System.Drawing.SolidBrush(Color.FromArgb(alpha, 56, 56, 56)); 60 gbmPhoto.DrawString(text, font, semiTransBrush2, x + 1, y + 1); 61 62 System.Drawing.SolidBrush semiTransBrush = new System.Drawing.SolidBrush(Color.FromArgb(alpha, 176, 176, 176)); 63 gbmPhoto.DrawString(text, font, semiTransBrush, x, y); 64 bmPhoto.Save(HttpContext.Current.Server.MapPath(newpath), System.Drawing.Imaging.ImageFormat.Jpeg); 65 gbmPhoto.Dispose(); 66 imgPhoto.Dispose(); 67 bmPhoto.Dispose(); 68 } 69 #endregion 70 71 #region 02.对给定的一个图片（Image对象）生成一个指定大小的缩略图 +Image GetThumbNailImage(Image originalImage, int thumMaxWidth, int thumMaxHeight) 72 ///<summary> 73 /// 对给定的一个图片（Image对象）生成一个指定大小的缩略图。 74 ///</summary> 75 ///<param name="originalImage">原始图片</param> 76 ///<param name="thumMaxWidth">缩略图的宽度</param> 77 ///<param name="thumMaxHeight">缩略图的高度</param> 78 ///<returns>返回缩略图的Image对象</returns> 79 public static Image GetThumbNailImage(Image originalImage, int thumMaxWidth, int thumMaxHeight) 80 { 81 Size thumRealSize = Size.Empty; 82 Image newImage = originalImage; 83 Graphics graphics = null; //创建画家对象，在缩略图上作画 84 try 85 { 86 thumRealSize = GetNewSize(thumMaxWidth, thumMaxHeight, originalImage.Width, originalImage.Height); 87 newImage = new Bitmap(thumRealSize.Width, thumRealSize.Height); 88 graphics = Graphics.FromImage(newImage); 89 graphics.CompositingQuality = CompositingQuality.HighQuality; 90 graphics.InterpolationMode = InterpolationMode.HighQualityBicubic; 91 graphics.SmoothingMode = SmoothingMode.HighQuality; 92 graphics.Clear(Color.Transparent); 93 graphics.DrawImage(originalImage, new Rectangle(0, 0, thumRealSize.Width, thumRealSize.Height), new Rectangle(0, 0, originalImage.Width, originalImage.Height), GraphicsUnit.Pixel); 94 } 95 catch { } 96 finally 97 { 98 if (graphics != null) 99 { 100 graphics.Dispose(); 101 graphics = null; 102 } 103 } 104 return newImage; 105 } 106 #endregion 107 108 #region 03.获取一个图片按等比例缩小后的大小 +Size GetNewSize(int maxWidth, int maxHeight, int imageOriginalWidth, int imageOriginalHeight) 109 ///<summary> 110 /// 获取一个图片按等比例缩小后的大小 111 ///</summary> 112 ///<param name="maxWidth">需要缩小到的宽度</param> 113 ///<param name="maxHeight">需要缩小到的高度</param> 114 ///<param name="imageOriginalWidth">图片的原始宽度</param> 115 ///<param name="imageOriginalHeight">图片的原始高度</param> 116 ///<returns>返回图片按等比例缩小后的实际大小</returns> 117 public static Size GetNewSize(int maxWidth, int maxHeight, int imageOriginalWidth, int imageOriginalHeight) 118 { 119 double w = 0.0; 120 double h = 0.0; 121 double sw = Convert.ToDouble(imageOriginalWidth); 122 double sh = Convert.ToDouble(imageOriginalHeight); 123 double mw = Convert.ToDouble(maxWidth); 124 double mh = Convert.ToDouble(maxHeight); 125 126 if (sw < mw && sh < mh) //返回原始图片大小 127 { 128 w = sw; 129 h = sh; 130 } 131 else if ((sw / sh) > (mw / mh)) //按原始图片的宽度缩放 132 { 133 w = maxWidth; 134 h = (w * sh) / sw; 135 } 136 else //按原始图片的高度缩放 137 { 138 h = maxHeight; 139 w = (h * sw) / sh; 140 } 141 return new Size(Convert.ToInt32(w), Convert.ToInt32(h)); 142 } 143 #endregion 144 145 #region 04.对指定路径的图片按位置和大小进行剪裁 +Image CutImage(string path, int x, int y, int width, int height) 146 /// <summary> 147 /// 对指定路径的图片按位置和大小进行剪裁 148 /// </summary> 149 /// <param name="path">图片路径</param> 150 /// <param name="x">图片要剪裁区域的左上角X坐标</param> 151 /// <param name="y">图片要剪裁区域的左上角Y坐标</param> 152 /// <param name="width">剪裁的宽度</param> 153 /// <param name="height">剪裁的高度</param> 154 /// <returns>返回剪裁图的Image对象</returns> 155 public static Image CutImage(string path, int x, int y, int width, int height) 156 { 157 string absolutePath = HttpContext.Current.Server.MapPath(path); 158 Bitmap originalImg = null; 159 Bitmap cutImg = null; 160 try 161 { 162 originalImg = new Bitmap(absolutePath); 163 PixelFormat format = originalImg.PixelFormat; 164 Rectangle range = new Rectangle(x, y, width, height); 165 cutImg = originalImg.Clone(range, format); //复制指定的区域 166 } 167 catch { } 168 finally 169 { 170 if (originalImg != null) 171 { 172 originalImg.Dispose(); 173 originalImg = null; 174 } 175 } 176 return cutImg; 177 } 178 179 /// <summary> 180 /// 对指定路径的图片按位置和大小进行剪裁 181 /// </summary> 182 /// <param name="path">图片路径</param> 183 /// <param name="x">图片要剪裁区域的左上角X坐标</param> 184 /// <param name="y">图片要剪裁区域的左上角Y坐标</param> 185 /// <param name="width">剪裁的宽度</param> 186 /// <param name="height">剪裁的高度</param> 187 /// <returns>返回剪裁图的Image对象</returns> 188 public static Image CutImage2(string path, int x, int y, int width, int height) 189 { 190 string absolutePath = HttpContext.Current.Server.MapPath(path); 191 Image img = null; 192 Bitmap cutImg = null; 193 Graphics graphics = null; 194 try 195 { 196 img = Image.FromFile(absolutePath); 197 cutImg = new Bitmap(width, height); 198 graphics = Graphics.FromImage(cutImg); 199 graphics.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); 200 } 201 catch { } 202 finally 203 { 204 img.Dispose(); 205 graphics.Dispose(); 206 } 207 return cutImg; 208 } 209 210 #endregion 211 } 212 213 }
当然:缩图也得有个规则,这里的规则就是函数,怎样使得到的图片不失真
这里我自己写了一个函数(仅供参考)
View Code
1 //存放服务器 2 FileUpload1.PostedFile.SaveAs(Server.MapPath("~/admin/userManage/WorksPath/" + filePath)); 3 4 5 #region 修改图片大小 6 System.Drawing.Image myImage = System.Drawing.Image.FromFile(MapPath("~/admin/userManage/WorksPath/" + filePath)); 7 8 if (myImage.Width > 500 || myImage.Height > 500) 9 { 10 //定义修改后的长宽 11 int h=50 ; 12 int w=50; 13 //计算长宽比例 14 float i = myImage.Height / (float)myImage.Width; 15 //如果长是宽的1.5倍 16 if (i >= 1) 17 { 18 h = 600; 19 w = Convert.ToInt32(500 / i); 20 } 21 else if (i<1) 22 { 23 w = 600; 24 h =Convert.ToInt32( 500 * i); 25 } 26 27 System.Drawing.Image newImage= Common.PicControl.GetThumbNailImage(myImage, w, h); 28 29 30 filePath = DateTime.Now.ToString("yyyyMMddhhmmss") + ran.Next(0, 999); 31 filePath = filePath + ".jpeg"; 32 ViewState["filePath"] = filePath; 33 //保存现有图片 34 newImage.Save(MapPath("~/admin/userManage/WorksPath/" + filePath), ImageFormat.Jpeg); 35 36 37 } 38 39 Image1.ImageUrl = ResolveClientUrl("~/admin/userManage/WorksPath/" + filePath);
二:将图片上移下移:(这个我用了很久,想了不同的方法,我也相信有更好的)思路:在数据库加个当前图片排序的字段sort,当点击上移时,就获取上面图片的sort和当前图片的sort,然后交换
View Code
1 //获取点击项的排序 2 string sequence = e.CommandArgument.ToString(); 3 4 //得到当前的sort(数据降序排序) 5 sql = @"select sort from (select ROW_NUMBER()over (order by sort desc)as sequence ,id,title,addtime,imagePath,sort,intro ,[type] from Works where type=1 )as A where sequence =@sequence and type=1"; 6 sql = sql.Replace("@sequence", sequence); 7 //将当前点击项的sort放在currentSort中 8 string currentSort = cs.GetOnlyField(sql); 9 10 //目标排序位.初始为0 11 int destiation = 0; 12 13 //上移,当前排序位减1,下移,加1(原始数据按降序排序) 14 if (e.CommandName == "up") 15 { 16 destiation = Convert.ToInt32(sequence) - 1; 17 } 18 else if (e.CommandName == "down") 19 { 20 destiation = Convert.ToInt32(sequence) + 1; 21 } 22 try 23 { 24 //得到目标排序 25 sql = @"select sort from (select ROW_NUMBER()over (order by sort desc)as sequence ,id,title,addtime,imagePath,sort,intro ,[type] from Works where type=1 )as A where sequence =@sequence and type=1"; 26 sql = sql.Replace("@sequence", destiation.ToString()); 27 string destinationSort = cs.GetOnlyField(sql); 28 29 //得到点击项的id 30 sql = " select id from (select ROW_NUMBER()over (order by sort desc)as sequence ,id,title,addtime,imagePath,sort,intro ,[type] from Works where type=1 ) A where sequence =@sequence and type=1"; 31 sql = sql.Replace("@sequence", sequence); 32 string currentid = cs.GetOnlyField(sql); 33 34 //执行换序操作 35 sql = @"update works set sort=@currentSort where id in (select id from (select ROW_NUMBER()over (order by sort desc)as sequence ,id,title,addtime,imagePath,sort,intro ,[type] from Works where type=1 )as A where sequence=@destiation) 36 update works set sort=@destinationSort where id=@currentid "; 37 38 sql = sql.Replace("@currentSort", currentSort); 39 sql = sql.Replace("@destiation", destiation.ToString()); 40 sql = sql.Replace("@destinationSort", destinationSort); 41 sql = sql.Replace("@currentid", currentid); 42 43 //执行换序 44 cs.ExecuteUpdate(sql); 45 //刷新页面 46 Response.AddHeader("refresh", "0"); 47 48 } 49 catch 50 { 51 }
三:一个js效果(http://www.libing123.com/picshow_1.aspx),打开网址大家可以看到效果
前台:(生成相框)
View Code
1 <script language="JavaScript"> 2 3 var flag=false; 4 function DrawImage(ImgD){ 5 var image=new Image(); 6 image.src=ImgD.src; 7 if(image.width>0 && image.height>0){ 8 flag=true; 9 if(image.width/image.height>= 178/170){ 10 if(image.width>178){ 11 ImgD.width=178; 12 ImgD.height=(image.height*178)/image.width; 13 }else{ 14 ImgD.width=image.width; 15 ImgD.height=image.height; 16 } 17 ImgD.alt=image.width+"x"+image.height; 18 } 19 else{ 20 if(image.height>170){ 21 ImgD.height=170; 22 ImgD.width=(image.width*170)/image.height; 23 }else{ 24 ImgD.width=image.width; 25 ImgD.height=image.height; 26 } 27 ImgD.alt=image.width+"x"+image.height; 28 } 29 } 30 } 31 32 </script>
Datalist绑定:
View Code
1 <asp:DataList ID="DataList1" RepeatColumns="3" runat="server" onitemdatabound="DataList1_ItemDataBound"> 2 <ItemTemplate> 3 <li> 4 <a href='<%#ResolveClientUrl("~/admin/userManage/WorksPath/")+Eval("imagePath") %>' rel="lightbox[1]" title='<%#Eval("title") %>' runat="server"> 5 6 <asp:Image ID="image1" Width="177px" Height="134px" ImageUrl='<%# ResolveClientUrl("~/admin/userManage/WorksPath/" + Eval("imagePath")) %>' runat="server" /> </a> 7 </li> 8 </ItemTemplate> 9 </asp:DataList>
当时遇到了一个问题:因为是要在datalist中有一张图片就要调用生成相框的代码:当时用了很多方法,后来想到datalist中ItmeDataBound事件
View Code
1 //datalist事件 2 protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e) 3 { 4 int j = this.DataList1.Items.Count; 5 6 for (int i = 0; i < j; i++) 7 { 8 if (i == j) 9 { 10 DataListItem items = (DataListItem)this.DataList1.Items[i]; 11 Image image = (Image)items.FindControl("image1"); 12 image.Attributes.Add("onload", "javascript:DrawImage(this);"); 13 } 14 } 15 }
为什么这么用,我想大家应该也知道!好啦,这的总结就到这啦!
