哈哈，亲们，真的不愿意相信你们是被标题吸引进来的，但事实让我不得不承认男人的本性。但是，请放心，我绝非标题党（我最痛恨那些浪费大家时间的标题党了），既然你有幸进来了，那我得想办法让你带着收获离开。轻轻地我走了，正如我轻轻地来，我要带走楼主留给我的一片云彩……
好吧，收起我的放荡不羁，让我们立马切入正题，正如标题上说的，今天我们要在ASP.NET中用jQuery.Jcrop插件实现图片的选取功能，你想选取美女的哪个部位你说了算，我就管不着了。
总的来说，原理很简单，大致流程是：在浏览器上加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> 服务器端用图片切割算法切割原图并输出切割后的图片。下面我们就分别对这几个步骤详细展开讨论分析，并在最后附上小demo供大家参考。
1、在页面上加载原图
这个就不用多说了，就是在页面上显示一张图片，一个img标签搞定，不过为了下一步演示，还是贴一下代码
Copy to Clipboard
引用的内容：[www.3672js.com] <img src="girl.jpg" kesrc="girl.jpg" alt="有了jQuery.Jcrop，选取美女的哪个部位你说了算" id="TestImage" style="float: left;">
2、用矩形框在原图上选取区域
这个我们要用到一个jQuery插件Jcrop，感谢Jcrop，其项目页面地址：http://deepliquid.com/content/Jcrop.html，再次感谢。接下来就是运用这个插件来让我们能在原图上随意地切图。先在页面上放几个隐藏域，用来存放当前选取的顶点坐标及选取矩形的尺寸，再放一个保存按钮，点击保存按钮后将在服务器上保存切割后的图片。代码如下：
Copy to Clipboard引用的内容：[www.3672js.com] <form id="AvatarForm" action="">
<input id="x" name="x" type="hidden">
<input id="y" name="y" type="hidden">
<input id="w" name="w" type="hidden">
<input id="h" name="h" type="hidden">
<input class="input_btn" id="BtnSaveAvatar" value="确定保存" type="submit">
</form>
四个隐藏域分别表示x：左上顶点x坐标；y：左上顶点y坐标；w：选取矩形宽度；h：选取矩形长度。
然后我们调用插件，做好初始化工作，引入js和css文件：
Copy to Clipboard引用的内容：[www.3672js.com] <script type="text/javascript" src="js/jquery.js" kesrc="js/jquery.js"></script>
<script type="text/javascript" src="js/Jcrop/js/jquery.Jcrop.js" kesrc="js/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="js/Jcrop/css/jquery.Jcrop.css" kesrc="js/Jcrop/css/jquery.Jcrop.css" type="text/css">
初始化原图的js代码：
Copy to Clipboard引用的内容：[www.3672js.com]$(document).ready(function(){
$('#TestImage').Jcrop({
onChange: updateCoords,
onSelect: updateCoords
});
$("#BtnSaveAvatar").click(function(){
$.ajax({
url:'Handler.ashx',
data:{'x':$("#x").val(),'y':$("#y").val(),'w':$("#w").val(),'h':$("#h").val()},
datatype : "text/json",
type:'post',
success: function(o){ window.location.href="result.aspx?url="+o;} //成功后跳转到result页面查看切割后图片，把url
});
return false;
});
});
function updateCoords(c){
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery