window.addEventListener('DOMContentLoaded', function () {
var image = document.querySelector('#image');
var previews = document.querySelectorAll('.preview');
var $alert = $('.alert');
cropper = new Cropper(image, {
scalable:false, //参数 由需求自定义
zoomable:false,
background:false,
viewMode:1,
aspectRatio:ratio, //裁剪框比例设置动态改变的,由外界参数决定(单独使用可设置常量)
checkCrossOrigin:false,
checkImageOrigin:false,
dragCrop:false,
modal:false,
dragMode:'move',
movable:false
});
document.getElementById('crop').addEventListener('click', function () {
var initialAvatarURL;
var canvas;
if (cropper) {
canvas = cropper.getCroppedCanvas({});
initialAvatarURL = image.src;
pic_data = canvas.toDataURL();
// canvas.toBlob(function (blob) { 报错
// var formData = new FormData();
// formData.append('file', blob, 'cropper.jpg');
// formData.append('category','bbs_post_recom/cropper');
// });
//调用自定义方法处理 canvas.toBlob() 失败事件
blob = processData(pic_data);//自定义方法解决canvas.toBlob() 失败
var formData = new FormData();
formData.append('file', blob, 'cropper.jpg');
formData.append('category','bbs_post_recom/cropper');
$.ajax('pic_upload', {
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (data) {
da = JSON.parse(data);
if(da.ret == 1){ //保存成功后的操作
.....
}else{
alert(da.msg);
}
},
error: function (data) {
image.src = initialAvatarURL;
},
complete: function () {
},
});
}
});
});