webuploader ajax上传图片,webuploader + cropper实现图片裁剪后上传

说明

这里主要用了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) {