说明

这里主要用了webloader里面的图片预览功能uploader.makeThumb取出对应base64图片文件，将文件生成的文件传给cropper裁剪，裁剪后将文件转换成blob对象传给服务器；

代码分步骤实现

1、取出图片base64的src

uploader.on('fileQueued', function(file) {

//这里动态添加一个上传中的提示……

var $li = $(

'

);

uploader.makeThumb(file, function(error, src) {

if (error) {

$img.replaceWith('不能预览');

return;

}

clipFn(src); //取出src传给裁剪函数

// var uploadClipImg = ……………………第三步

}, 1, 1);

2、cropper裁剪

裁剪说明：裁剪的步骤首先是根据cropper提供的接口获取索要裁剪的尺寸参数，比如getData，然后传给生成canvas图像的方法getCroppedCanvas,然后

通过toDataURL()生成裁剪过后的base64地址；

var clipFn = function(src) {

//============这里是angular的弹窗，可换成其他形式

var modal = $uibModal.open({

templateUrl: './frontend/template/clipModel.html',

backdrop: 'static',

windowClass: 'clipModel',

controller: function($scope, $uibModalInstance, egArray) {

========弹窗结束

$(function() { //裁剪是一步操作，这里是必须的

var clipImg = $('#clipImg');

clipImg.attr('src', src);

clipImg.cropper({

aspectRatio: 1 //这里是裁剪比例

autoCrop: true, //是否自动开启裁剪

ready: function() {

$('#coverBtn').click(function() { //上传点击按钮

clipImg.parent().append($li); //上传中……的一个提示

var imgData = clipImg.cropper('getData', {}); //获取当前裁剪参数

if (imgData.x !== 0) {

var canVas = clipImg.cropper("getCroppedCanvas", imgData); //生成裁剪过后的base64

var newImgUrl = canVas.toDataURL();

clipImg.attr('src', newImgUrl); //裁剪过后的图片预览

var type = clipImg.attr('src').split(';')[0].split(':')[1]; //获取图片格式

upload(canVas,type) //执行上传函数

}

return false;

})

}

});

})

}

});

}

3、formData上传服务器

var uploadClipImg = function(canVas,type){

canVas.toBlob(function(blob) {

canVas.toBlob(function(blob) {

var formData = new FormData(

formData.append("file", blob, file.name);

$.ajax({

type: "POST",

url: upUrl,

data: formData,

contentType: false, //必须

processData: false, //必须

dataType: "json",

success: function(retJson) {

if (retJson.code == 200) {

console.log('上传成功:', retJson);

clipImg.cropper('destroy'); //格式化裁剪

$('#' + file.id).remove(); //移除上传中……提示

$uibModalInstance.close(); //关闭弹窗

}

},

error: function() {}

});

}

}, type);