jQuery Jcrop插件实现图片选取功能

总的来说，原理很简单，大致流程是：在浏览器上加载原图 –> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 –> 服务器端用图片切割算法切割原图并输出切割后的图片。下面我们就分别对这几个步骤详细展开讨论分析，并在最后附上小demo供大家参考。
1、在页面上加载原图
这个就不用多说了，就是在页面上显示一张图片，一个img标签搞定，不过为了下一步演示，还是贴一下代码
<img src=”girl.jpg” alt=”” id=”TestImage” style=”float: left;”>
2、用矩形框在原图上选取区域
这个我们要用到一个jQuery插件Jcrop，感谢Jcrop，其项目页面地址：http://deepliquid.com/content/Jcrop.html，再次感谢。接下来就是运用这个插件来让我们能在原图上随意地切图。先在页面上放几个隐藏域，用来存放当前选取的顶点坐标及选取矩形的尺寸，再放一个保存按钮，点击保存按钮后将在服务器上保存切割后的图片。代码如下：

<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文件：

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript”src=”js/Jcrop/js/jquery.Jcrop.js”></script>
<link rel=”stylesheet” href=”js/Jcrop/css/jquery.Jcrop.css” type=”text/css”>

初始化原图的js代码：

$(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;