上传裁剪头像(Jcrop)

-- by Stephen

2016/1/24 20:17:21

总体思路：用户点击选择头像按钮，选好图片后jcrop所在的div以遮罩层的形式显示，此时异步更新图片的src，即已经在服务器中将该图片保存了。返回给js图片的绝对路径和图片名称。用户点击保存头像按钮，向服务器传递图片名称和裁剪系数，异步回调得到裁剪结果，更新页面。

第一步：引入 jcrop 的 js 和 css 文件

这里使用了集成好的 basic.js 和 basic.css 和 html，代码可以去 github 上下载(下载地址：https://github.com/Stephen-LG/JcropDemo.git)

第二步：解决 input file 样式不好看的问题

将input file控件的display属性设成none，用另一个input button控件来间接控制input file控件(οnclick=”head_img.click()”，其中head_img为input file的id)。这样将input button控件设置成想要的样式即可

第三步：解决用户上传图片后异步更新jcrop插件中的图片src

这肯定需要ajax异步请求才能完成，我使用ajaxFileUpload插件来完成这个功能。但是因为这个插件很早就不再更新了，在使用过程中需要注意几点：

1. 在使用时会提示handleError不是一个function，我们在ajaxfileupload.js文件中添加如下代码：

handleError: function( s, xhr, status, e ) {

// If a local callback was specified, fire it

if ( s.error ) {

s.error.call( s.context || s, xhr, status, e );

}

// Fire the global callback

if ( s.global ) {

(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );

}

}

在服务器返回数据后，该插件会自动在数据外面包裹上pre标签，因为它使用eval函数，解决方式如下：

在uploadHttpData函数中的

if ( type == "json" )

eval( "data = " + data );

改成

if ( type == "json" )

data = jQuery.parseJSON(jQuery(data).text());

在回调函数中更新img的src后，插件获取到新图片的长宽一直是上一个。原因应该是在于，动态更改src以后，图片还没有下载完成，这个时候图片还没有被替换。解决方式如下：

$("#img").on("load",function(){

//这里添加你的函数就OK

});

用onchage函数监听input file控件只会触发一次。解决方式如下：

$(document).delegate('input[name=head_img]', 'change', function() {});

在选择过一次图片后在选择一次，这时img标签的width和height不会改变，而是图片拉伸了，解决方式如下：

将img标签移除再重新创建即可：

$('#origi-img').remove();

$('.jcrop_w').append("");

第四步：解决Jcrop的裁剪框只在缩略过的图片内部进行移动和裁剪

这个问题想了不少时间，最后用了比较笨的方法，在用户选择了图片后，用一个函数计算出缩略后的图片宽高，在获取Jcrop实例后用$(‘.jcrop-holder’).css({left:holderW,top:holderH});

第五步：解决向服务器传递裁剪参数

$('#target').Jcrop({

onChange: showPreview,

onSelect: showPreview,

// ...其他options

});

在这两个回调函数中及时对裁剪系数进行更新，保存在html页面中的input hidden中，一共有六个系数

$('#x1').val(c.x); // 选择框最左上角的x坐标值

$('#y1').val(c.y); // 选择框最左上角的y坐标值

$('#x2').val(c.x2); // 选择框最右下角的x坐标值

$('#y2').val(c.y2); // 选择框最右下角的y坐标值

$('#w').val(c.w); // 选择框的宽度

$('#h').val(c.h); // 选择框的高度

那么问题来了。。。在用户选择图片后向服务器发送的是一张正常大小的图片，然后在jcrop页面中显示的是缩略过的图片，裁剪框是在缩略过的图片上进行的裁剪，因此还得向服务器发送一个缩略比例,因此在cutImage函数中将缩略比例存储在input hidden中

第六步：解决服务器裁剪图片

我这里使用的是php语言，因此用了php的GD库函数配合从前端获得传递过来的起始坐标(x,y)以及裁剪的宽高和缩略比例较为轻松的实现了，这里不细述了，有兴趣看源代码