cropper固定宽高裁剪_cropper.js 图片剪裁功能使用

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 () {

},

});

}

});

});