注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Bioinformatics home

 
 
 

日志

 
 

JQuery在线截取图片 ASP.NET结构开发 (转自csdn)  

2013-04-15 23:22:45|  分类: 编程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

JQuery在线截取图片 ASP.NET结构开发

1.在线截取

 前几天看织梦CMS,有个截图功能挺好的,可以在线选取需要截取的部分图片,然后后台截取

2.开始正文

首先构建文档,样式

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title>JQuery截取图片</title>  
  4.     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>  
  5.     <style type="text/css">  
  6.         body{width: 100%;height: 100%;background-color: #333;}  
  7.         #body1{margin-top: 50px;margin-left: 50px;right: 50px;background-color: #999;width: 800px;height: 500px;}  
  8.         #div_img{left:70px;top:60px;border:3px solid #333;width:400px;height:300px;position:absolute; z-index:1;}  
  9.         #div_caijian{ border:2px; border-style:dashed; border-color:#FFF; position:absolute; width:240px; height:180px; left:73px; top:63px; cursor:move; z-index:999;}  
  10.         #div_xinxi{ color:#333; top:450px; left:70px; position:absolute;}  
  11.         #div_liulan{ border:3px solid #333; width:150px; height:112.5px; left:500px; top:60px; position:absolute; overflow:hidden;}  
  12.         #img_liulan{ position:absolute; left:0px; top:0px;}  
  13.     </style>  
  14.     <script type="text/javascript" language="javascript">  
  15.         //JS  
  16.     </script>  
  17. </head>  
  18. <body>  
  19.     <form id="form1" runat="server">  
  20.     <div id="body1">  
  21.         <div id="div_img">  
  22.             <img src="Images/Chrysanthemum.jpg" width="400px" height="300px" alt="" />  
  23.         </div>  
  24.         <div id="div_xinxi">  
  25.             left: <asp:TextBox ID="txt_left" runat="server" Text="0"></asp:TextBox>     
  26.             top:  <asp:TextBox ID="txt_top" runat="server" Text="0"></asp:TextBox>     
  27.             <asp:Button ID="Button1" runat="server" Text="裁剪" onclick="Button1_Click" />  
  28.         </div>  
  29.         <div id="div_liulan">  
  30.             <img id="img_liulan" src="Images/Chrysanthemum.jpg" width="250px" height="187.5px" alt="">  
  31.         </div>  
  32.     </div>  
  33.     <div id="div_caijian">  
  34.     <!-- IE下空层选不中,边框能选中,未解,有知道的请告诉LZ 谢谢~~ -->  
  35.     </div>  
  36.     </form>  
  37. </body>  
  38. </html>  

样式和内容在这里就不多介绍了 大家看看就可以了 出来的效果如下:

JavaScript的编写

[javascript] view plaincopy
  1. var x, y;  
  2.         var old_position = {};  
  3.         var offset = {};  
  4.         $(document).ready(hide);  
  5.         function hide() {  
  6.             //选择层半透明 效果酷一点  
  7.             $("#div_caijian").fadeTo("slow", 0.5);  
  8.             //选择层移动事件  
  9.             $("#div_caijian").mousedown(function (e) {  
  10.                 //获取当前选择层的相对坐标(与PageX,PageY不同clientX,clientY是相对坐标 如果有滚动条值也会不同)  
  11.                 old_position = { X: e.clientX, Y: e.clientY };  
  12.                 //获取当前选择层的偏移量  
  13.                 offset = $("#div_caijian").offset();  
  14.                 //修改选择层背景色  
  15.                 $("#div_caijian").css({ "background-color""White" });  
  16.                 //获取相对坐标与偏移量的相差值  
  17.                 var x1 = e.clientX - offset.left;  
  18.                 var y1 = e.clientY - offset.top;  
  19.                 //绑定鼠标移动事件  
  20.                 $("#div_caijian").mousemove(function (k) {  
  21.                     //获取移动后的偏移量  
  22.                     offset = $("#div_caijian").offset();  
  23.                     //限制选择层只能在固定的区域移动,限制X最小值  
  24.                     if ((k.clientX - x1 - 73) <= 0) {  
  25.                         k.clientX = 73 + x1;  
  26.                     }  
  27.                     //限制X最大值  
  28.                     if ((k.clientX - x1 - 73) >= 155) {  
  29.                         k.clientX = 155 + 73 + x1;  
  30.                     }  
  31.                     //限制Y最小值  
  32.                     if ((k.clientY - y1 - 63) <= 0) {  
  33.                         k.clientY = 63 + y1;  
  34.                     }  
  35.                     //限制Y最大值  
  36.                     if ((k.clientY - y1 - 63) >= 115) {  
  37.                         k.clientY = 115 + 63 + y1;  
  38.                     }  
  39.                     //移动后的相对坐标减去相差值得到移动后的位置,获取X值  
  40.                     x = k.clientX - x1;  
  41.                     //获取Y值  
  42.                     y = k.clientY - y1;  
  43.                     //设置选择层的位置  
  44.                     $("#div_caijian").css({  
  45.                         left: x,  
  46.                         top: y  
  47.                     });  
  48.                     //PS:下面的这些值都是自己定义的,可以更改  
  49.                     //PS:显示图片层距离左上角X=73,Y=63  
  50.                     //所以移动后的偏移量应当减去上面的值即offset.left - 73,offset.top - 63  
  51.                     //移动层的最大X偏移量为155,最大Y偏移量为115  
  52.                     //下面的100=为显示而动态移动图片的宽度img_liulan-选择层宽度div_caijian/下面图片的宽度div_img*为显示而动态移动图片的宽度img_liulan  
  53.                     var x2 = (offset.left - 73) / 155 * 100;  
  54.                     //下面的75=为显示而动态移动图片的高度img_liulan-选择层高度div_caijian/下面图片的高度div_img*为显示而动态移动图片的高度img_liulan  
  55.                     var y2 = (offset.top - 63) / 115 * 75;  
  56.                     //设置为显示而动态移动图片的位置  
  57.                     $("#img_liulan").css({  
  58.                         left: 0 - x2,  
  59.                         top: 0 - y2  
  60.                     });  
  61.                     //显示选择层最新的偏移量减去73的值  
  62.                     $("#txt_left").val(offset.left - 73);  
  63.                     //显示选择层最新的偏移量减去63的值  
  64.                     $("#txt_top").val(offset.top - 63);  
  65.                 });  
  66.                 //绑定选择层鼠标离开时的事件  
  67.                 $("#div_caijian").mouseup(function (k) {  
  68.                     //去除掉选择层移动时的样式,将背景设置透明  
  69.                     $("#div_caijian").css({ "background-color""transparent" });  
  70.                     //去除掉选增层移动事件  
  71.                     $("#div_caijian").unbind("mousemove");  
  72.                 });  
  73.             });  
  74.             //绑定页面级鼠标离开时的事件(强化作用)  
  75.             $(document).mouseup(function () {  
  76.                 //去除掉选择层移动时的样式,将背景设置透明  
  77.                 $("#div_caijian").css({ "background-color""transparent" });  
  78.                 //去除掉选增层移动事件  
  79.                 $("#div_caijian").unbind("mousemove");  
  80.             });  
  81.         };  

ASP.NET处理坐标,截取图片

  1. protected void Button1_Click(object sender, EventArgs e)  
  2.     {  
  3.         //获取显示选择层最新的偏移量减去73的值  
  4.         string left = txt_left.Text;  
  5.         //获取显示选择层最新的偏移量减去63的值  
  6.         string top = txt_top.Text;  
  7.         //PS:因为要截取图片,所以会先生成一个新的文件便于截取  
  8.         //生成新的文件名(GUID格式)  
  9.         string fileName = "";  
  10.         //图片的格式  
  11.         string Extension = "";  
  12.         //要截取的图片宽度  
  13.         int width=0;  
  14.         //要截取的图片高度  
  15.         int height=0;  
  16.         //要截取的图片路径  
  17.         DirectoryInfo path = new DirectoryInfo(Server.MapPath("~/Images"));  
  18.         foreach (FileInfo file in path.GetFiles())  
  19.         {  
  20.             //指定文件名  
  21.             if (file.Name.Substring(0,file.Name.IndexOf("."))=="Chrysanthemum")  
  22.             {  
  23.                 //获取图片格式  
  24.                 Extension = file.Extension;  
  25.                 //获取新文件名称  
  26.                 fileName = Guid.NewGuid().ToString() + file.Extension;  
  27.                 //保存新文件  
  28.                 File.Copy(Server.MapPath("~/Images") + "/" + file.Name, Server.MapPath("~/Images") + "/" + fileName);  
  29.             }  
  30.         }  
  31.         //如果新文件生成成功  
  32.         if (fileName!="")  
  33.         {  
  34.             //加载要截取的文件  
  35.             System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath("~/Images") + "/" + fileName);  
  36.             //获取要截取文件的宽度  
  37.             width=image.Width;  
  38.             //获取要截取文件的高度  
  39.             height=image.Height;  
  40.             //获取新图片的宽度  
  41.             //240->显示选择层的宽度在页面上  
  42.             //240 * width / (240 + 155) ->选择层的宽度/(选择层宽度+最大偏移量)*原始图片的宽度  
  43.             int newWidth = 240 * width / (240 + 155);  
  44.             //获取新图片的高度  
  45.             //180->显示选择层的高度在页面上  
  46.             //180 * height / (180 + 115) ->选择层的高度/(选择层高度+最大偏移量)*原始图片的高度  
  47.             int newHeight = 180 * height / (180 + 115);  
  48.             //获取新图片在原始图片上的左上角的X值  
  49.             //left->当前X偏移量  
  50.             //Convert.ToInt32(left) * width / (240 + 155) ->当前X偏移量/(选择层高度+最大偏移量)*原始图片的宽度  
  51.             int x = Convert.ToInt32(left) * width / (240 + 155);  
  52.             //获取新图片在原始图片上的左上角的Y值  
  53.             //top->当前Y偏移量  
  54.             //Convert.ToInt32(top) * height / (180 + 115) ->当前Y偏移量/(选择层高度+最大偏移量)*原始图片的宽度  
  55.             int y = Convert.ToInt32(top) * height / (180 + 115);  
  56.             //指定宽度,高度初始化新图片  
  57.             Bitmap bmp = new Bitmap(newWidth, newHeight);  
  58.             //加载画布  
  59.             Graphics graphics = Graphics.FromImage(bmp);  
  60.             //要生成的新图片的大小  
  61.             Point[] destParal = new Point[] { new Point() { X = 0, Y = 0 }, new Point() { X = newWidth, Y = 0 }, new Point() { X = 0, Y = newHeight } };  
  62.             //开始截取,参数分别是:要截取的图片,要生成新图片的大小,要截取图片在原始图片的X,Y,宽度,高度,srcRect度量单位(第三个参数)  
  63.             graphics.DrawImage(image, destParal, new Rectangle() { X = x, Y = y, Width = newWidth, Height = newHeight }, GraphicsUnit.Pixel);  
  64.             //保存截取后的图片  
  65.             bmp.Save(Server.MapPath("~/Images")+"/"+ Guid.NewGuid().ToString() + Extension);  
  66.             //释放画布资源  
  67.             graphics.Dispose();  
  68.             //释放原始图片资源  
  69.             image.Dispose();  
  70.             //用于截取的图片  
  71.             File.Delete(Server.MapPath("~/Images") + "/" + fileName);  
  72.         }  
  73.     } 
  评论这张
 
阅读(949)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017