cropper.js裁剪图片，上传图片

[code]//html
<img src="{{ Auth::user()['avater'] }}" id="avater" style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: -17px; left: -7px; width: 180px; height: 180px;">
上传头像<input type="file" id="up">
//js
$("#up").change(function() {
var $file = $(this);
var fileObj = $file[0];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#avater");
if(fileObj && fileObj.files && fileObj.files[0]){
dataURL = windowURL.createObjectURL(fileObj.files[0]);
$img.attr('src',dataURL);
$('#avater').cropper('replace', dataURL, false);
}else{
dataURL = $file.val();
var imgObj = document.getElementById("avater");
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
//重置图片
$('#avater').cropper('replace', dataURL, false);
}
});
$('#avater').cropper({
aspectRatio: 1 / 1,
viewMode: 2,
dragMode: 'none',
preview: ".preview-container",
responsive: false,
restore: false,
//        modal:false,
//        guides:false,
//        background:false,
autoCrop: false,
//        autoCropArea:0.1,
//        movable:false,
//        scalable:false,
//        zoomable:false,
//        wheelZoomRatio:false,
//        cropBoxMovable:false,
//        cropBoxResizable:false,
ready: function () {
console.log("ready");
console.log(this);
$(this).cropper('crop');
},
cropstart: function (e) {
console.log(e);
console.log("cropstart");
},
cropmove: function (e) {
console.log("cropmove");
},
cropend: function (e) {
console.log("cropend");
},
crop: function (e) {
console.log("crop");
},
zoom: function (e) {
console.log("zoom");
},
});