webuploader+ cropper剪栽之后上传

#HTML

<link rel="stylesheet" type="text/css" href="webuploader.css?v=16">
<link rel="stylesheet" type="text/css" href="cropper.min.css?v=16">

  <img src="" class="showImg"/>
  <input type="file" class="fileInput" accept="image/*" hidden />
  <div class="upload">上传照片</div>

<div id="cropperImage" style="display: none;position: fixed;left:0;top:0;width:100%;height:100%;z-index:10;">
    <div style="padding: 5px;position:absolute;left:0;top:0;width:100%;display:flex;justify-content: flex-end;z-index:100">
        <div style="float: right;">
            <button id="image_save" style="height: 28px;line-height: 28px;margin: 5px 5px 0;padding: 0 15px;border:1px solid #1E9FFF;background-color: #1E9FFF;color: #fff;border-radius: 2px;font-weight: 400;cursor: pointer;text-decoration: none;">保存</button>
            <button id="image_cancel" style="height: 28px;line-height: 28px;margin: 5px 5px 0;padding: 0 15px;border:1px solid #ccc;background-color: #ccc;color: #fff;border-radius: 2px;font-weight: 400;cursor: pointer;text-decoration: none;">取消</button>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="upload-img" style="width:100%;height: 100%;"></div>
</div>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="webuploader.min.js"></script>
<script type="text/javascript" src="cropper.min.js"></script>

<script>
	$(function(){
			var  uploader,width=300,height=300;//剪栽区域
			
		    $(".upload").on('click', function() {
		        $(".fileInput").val('');
		        uploader != undefined && uploader.destroy();
		        $(".fileInput").trigger("click");
		    });
		    
		    $(".fileInput").on('change', function() {
		        var file = this.files[0]; //获取上传图片，IE有兼容性问题
		        if (!(file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/gif' || file.type == 'image/png')) {
		            $(".fileInput").val('');
		            alert('支持图片格式：GIF、JPG、JPEG、PNG');
		            return;
		        }
		        webuploadTool(file);
		    });
			
			/**
			* 上传
			*/
			function webuploadTool(file){
				uploader = WebUploader.create({
				        auto: true,// 选完文件后，是否自动上传。
				        swf: "webuploader/Uploader.swf",
				        server:上传服务地址,
				        fileNumLimit: 1,
				        fileSizeLimit: 5 * 1024 * 1024, // 5 M
				        fileSingleSizeLimit: 5 * 1024 * 1024, // 5 M
				        accept: {
				            title: 'Images',
				            extensions: 'gif,jpg,jpeg,bmp,png',
				            mimeTypes: 'image/*'
				        },
				        threads:1,
				        compress:{
				            width: width,
				            height: height,
				        }
				    });
				    
				    var reader = new FileReader();
				    reader.onload = function() {
				        var url = reader.result;
				       clipFn(url);
				    }
				    reader.readAsDataURL(file);
			   
				    uploader.on('uploadSuccess', function(file, rs) {
				        // 图片上传回调函数
				        if (rs.error && rs.error.code == 1) {
				            alert(rs.message);
				            return;
				        }
				    	$(".showImg").attr('src':rs.url);
				    });
			}
			
			/**
			 * @param {剪栽文件} file 
			 */
			function clipFn(url){
			    //裁剪弹窗
			    $(".upload-img").html('<img id="image" src="' + url + '" />')
			    $("#cropperImage").show();
			    $image = $(".upload-img").find("#image");
			    $image.attr("src",url);
			    $("#image_save").off('click').on("click", () => {
			        var canVas = $image.cropper("getCroppedCanvas", undefined)
			        var file = convertBase64UrlToBlob(canVas.toDataURL()); 
			        uploader.addFiles(file);
			        $("#cropperImage").hide();
			    })
			    $("#image_cancel").off('click').on("click", () => {
			        $(".fileInput").val('');
			        $("#cropperImage").hide();
			    })
			    /
			    $image.cropper({
			        aspectRatio: width/height, //比率
			        viewMode: 1, //裁剪框只能在图片范围内移动
			        dragMode: "move",
			        restore: !1,
			        guides: 1,
			        resizable: true, //是否允许改变剪裁框的大小。
			        cropBoxMovable: !1,
			        cropBoxResizable: !1,
			        autoCropArea: 0.7,
			        crop: function(data) {
			            data.height = height;
			            data.width = width;
			        }
			    })
			}
			
			/**
			 * @param {以base64的图片url数据转换为Blob用webuploader上传给后台} urlData 
			 */
			function convertBase64UrlToBlob(urlData) {
			    var bytes = window.atob(urlData.split(',')[1]);
			    var ab = new ArrayBuffer(bytes.length);
			    var ia = new Uint8Array(ab);
			    for (var i = 0; i < bytes.length; i++) {
			        ia[i] = bytes.charCodeAt(i);
			    }
			    return new Blob([ab], {
			        type: 'image/jpeg'
			    });
			}
	});
	
</script>

资源

Webupload:https://fex.baidu.com/webuploader/
copper:https://www.bootcdn.cn/cropper/