JQuery在线截取图片
JQuery在线截取图片 ASP.NET结构开发
1.在线截取
前几天看织梦CMS,有个截图功能挺好的,可以在线选取需要截取的部分图片,然后后台截取
2.开始正文
首先构建文档,样式
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery截取图片</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<style type="text/css">
body{width: 100%;height: 100%;background-color: #333;}
#body1{margin-top: 50px;margin-left: 50px;right: 50px;background-color: #999;width: 800px;height: 500px;}
#div_img{left:70px;top:60px;border:3px solid #333;width:400px;height:300px;position:absolute; z-index:1;}
#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;}
#div_xinxi{ color:#333; top:450px; left:70px; position:absolute;}
#div_liulan{ border:3px solid #333; width:150px; height:112.5px; left:500px; top:60px; position:absolute; overflow:hidden;}
#img_liulan{ position:absolute; left:0px; top:0px;}
</style>
<script type="text/javascript" language="javascript">
//JS
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="body1">
<div id="div_img">
<img src="Images/Chrysanthemum.jpg" width="400px" height="300px" alt="" />
</div>
<div id="div_xinxi">
left: <asp:TextBox ID="txt_left" runat="server" Text="0"></asp:TextBox>
top: <asp:TextBox ID="txt_top" runat="server" Text="0"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="裁剪" onclick="Button1_Click" />
</div>
<div id="div_liulan">
<img id="img_liulan" src="Images/Chrysanthemum.jpg" width="250px" height="187.5px" alt="">
</div>
</div>
<div id="div_caijian">
<!-- IE下空层选不中,边框能选中,未解,有知道的请告诉LZ 谢谢~~ -->
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery截取图片</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<style type="text/css">
body{width: 100%;height: 100%;background-color: #333;}
#body1{margin-top: 50px;margin-left: 50px;right: 50px;background-color: #999;width: 800px;height: 500px;}
#div_img{left:70px;top:60px;border:3px solid #333;width:400px;height:300px;position:absolute; z-index:1;}
#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;}
#div_xinxi{ color:#333; top:450px; left:70px; position:absolute;}
#div_liulan{ border:3px solid #333; width:150px; height:112.5px; left:500px; top:60px; position:absolute; overflow:hidden;}
#img_liulan{ position:absolute; left:0px; top:0px;}
</style>
<script type="text/javascript" language="javascript">
//JS
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="body1">
<div id="div_img">
<img src="Images/Chrysanthemum.jpg" width="400px" height="300px" alt="" />
</div>
<div id="div_xinxi">
left: <asp:TextBox ID="txt_left" runat="server" Text="0"></asp:TextBox>
top: <asp:TextBox ID="txt_top" runat="server" Text="0"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="裁剪" onclick="Button1_Click" />
</div>
<div id="div_liulan">
<img id="img_liulan" src="Images/Chrysanthemum.jpg" width="250px" height="187.5px" alt="">
</div>
</div>
<div id="div_caijian">
<!-- IE下空层选不中,边框能选中,未解,有知道的请告诉LZ 谢谢~~ -->
</div>
</form>
</body>
</html>
样式和内容在这里就不多介绍了 大家看看就可以了 出来的效果如下:
JavaScript的编写
[javascript]
var x, y;
var old_position = {};
var offset = {};
&nbs
补充：web前端 , JavaScript ,
