前端：(4) jQuery笔记----jQuery之Jcrop
头像裁剪是一个经常用到的功能，实现原理也较为简单，就是在本地选择好所需裁剪图片的坐标，将坐标发送到服务器，由服务器执行图片裁剪操作。
jQuery插件Jcrop提供了强大的图片裁剪坐标选择插件。一下来介绍它的用法。本处采用了AJAX本地上传一张图片的方法让用户裁剪。很多验证没有做，因为作为一个关于Jcrop的例子，很多验证不如与本文研究的范畴。服务器端采用MVC3实现。
直接贴代码，详解注释里面有了。
一、前台页面代码。
<link href="http://www.cnblogs.com/Content/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/Content/jquery-1.7.1.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Content/ajaxfileupload.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Content/jquery.Jcrop.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
//当点击上传按钮时，AJAX上传图片到服务器
ajaxFileUpload();
})
})
//当裁剪框变动时，将左上角相对图片的X坐标与Y坐标，宽度以及高度放到<input type="hidden">中(上传到服务器上裁剪会用到)
function showCoords(c) {
$("#p1").text(c.x + " " + c.y + " " + c.w + " " + c.h );
$("#x1").val(c.x);
$("#y1").val(c.y);
$("#cw").val(c.w);
$("#ch").val(c.h);
}
//当AJAX上传图片操作
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/uploadandcut/upload?action=up', //用于文件上传的服务器端请求地址up参数标记此次是上传操作还是裁剪操作
secureuri: false, //一般设置为false，是否安全上传
fileElementId: 'file1', //文件上传控件的id属性 <input type="file" id="file" name="file" />
dataType: 'json', //返回值类型 一般设置为json 期望服务器传回的数据类型
success: function (data, status) //服务器成功响应处理函数
{
//上传成功后在将服务器上刚刚上传的图片显示在img1上
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
//同时启动裁剪操作，触发裁剪框显示，让用户选择图片区域
$("#img1").Jcrop({
bgColor: 'black',
bgOpacity: .4,
setSelect: [100, 100, 150,150], //设定4个角的初始位置
aspectRatio: 1 / 1,
onChange: showCoords, //当裁剪框变动时执行的函数
onSelect: showCoords, //当选择完成时执行的函数
});
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
</script>
<div>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦!" src="" /></p>
<p id="p1"></p>
<