图片裁剪，数据流base64位图片转换上传服务器

这个项目刚弄完，发现一个很爽的插件，用作于图片截取
截取需要用到两个JS文件，一个是cropbox.js，另一个为jquery-1.11.0.min.js 必须是11位，之前项目中有个.8的不能使用！！！
主要有几个问题自己记录下，也是方便后边人
问题1：插件需要具体的js以及对象和源码
问题2：base64数据流图片怎么改成可上传文件的形式
问题3：注意事项
直接上源码样式没有只有html端的页面

<span class="item_name"><span class="colorred">*</span>车展图片：</span>
		<p style="display: inline-block;color: red;line-height: 31px;">车展场景图三张，图片要清晰明了，图片尺寸大小430*300，jpg/png格式，车展图片至少上传一张！(若删除图片，直接点击场景图即可！)</p>
		<div class="container_imgbox">
			<div class="fl">
				<div class="imageBox" style=""> 
				<div class="thumbBox"></div>
				<div class="spinner" style="display: none">等待上传Loading...</div>
				</div>
				<div class="action"> 
				<div class="new-contentarea tc"> 
					<a href="javascript:void(0)" class="upload-img">
						<label for="upload-file">上传图像</label>
					</a>
					<input type="file" class=""  id="upload-file" />
				</div>
				<input type="button" id="btnCrop"  class="Btnsty_peyton" value="确定裁切">
				<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
				<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
				</div>
			</div>
		    <div class="cropped fl"></div>
			<div class="clear"></div>
		</div>
	  	<script type="text/javascript">
		  $(window).load(function() {
		  	var options =
		  	{
		  		thumbBox: '.thumbBox',
		  		spinner: '.spinner',
		  		imgSrc: 'img/avatar.jpg'
		  	}
		  	var cropper = $('.imageBox').cropbox(options);
		  	$('#upload-file').on('change', function(){
		  		var reader = new FileReader();
		  		reader.onload = function(e) {
		  			options.imgSrc = e.target.result;
		  			cropper = $('.imageBox').cropbox(options);
		  		}
		  		reader.readAsDataURL(this.files[0]);
		  		this.files = [];
		  	})
		  	$('#btnCrop').on('click', function(){
		  		var fontSize = $(".imageBox").attr("style");
			  	if(fontSize){
					var r = confirm("确定要裁剪？");
					//获取 截图个数
					var num = $('.cropped').children("#delete").children("img").length + 1;
			  		if(r == true){
			  			if(num  > 3){
				  			layer.alert("最多可裁取三张图片",{icon:5});
				  			return false;
				  		}else{
				  			//插件返回base64图片
				  			var img = cropper.getDataURL();
							var form=document.forms[0];
						    var formData = new FormData();   
						    
						    //convertBase64UrlToBlob函数是将base64编码转换为Blob  
						    //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同  
						formData.append("photoimg",convertBase64UrlToBlob(img)); 
					   //ajax 提交form  
					    $.ajax({  
					        url:'/Uploadfile/upImage/', 
					        type : "POST",  
					        data : formData,  
					        dataType:"text",  
					        processData : false,         // 告诉jQuery不要去处理发送的数据  
					        contentType : false,        // 告诉jQuery不要去设置Content-Type请求头  
					        // alert(22);
					        success:function(data){
					        	var imgs = $(data).attr("src");
					        	$('.cropped').append('<div id="delete"><img src="'+imgs+'" align="absmiddle" style="width:150px;"><p>场景图</p></divs>');
					        },
					    });
					   function convertBase64UrlToBlob(urlData){
						    var bytes=window.atob(urlData.split(',')[1]);        
						    //去掉url的头，并转换为byte  
						    //处理异常,将ascii码小于0的转换为大于0  
						    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/png'}); 
						}  
			  		}
	  			}
		  		}else{
				  	layer.alert("请先上传图片！",{icon:10});
		  		}		  		
		  	})
		  	$('#btnZoomIn').on('click', function(){
		  		cropper.zoomIn();
		  	})
		  	$('#btnZoomOut').on('click', function(){
		  		cropper.zoomOut();
		  	})
		  });
	//图片删除
	 $('#delete').live('click',function(){
	        if(confirm('确定删除图片')){
	    		$(this).remove();
	        }
      })   
	//表单提交
	//新建数组 拿到class下children级别的each 循环 变成一个逗号隔开的数据
    	var map_img_url =  new Array();
    	$(".cropped").children("#delete").children("img").each(function(){
    		map_img_url.push($(this).attr("src"));
    	})
    	$("#map_img_url").val(map_img_url);
	  	</script>  

里边有注释，几乎很详细说明了，但是 需要注意js文件版本问题，这个js是插件形式自动截取出来图片都是base64位的需要用Blob对象进行转码，然后from表单拿到数据，进行提交，本人ajax提交问题是后台编好的了，直接调用，注意blob对象生成的file文件没有后缀，上传服务器的时候记得给图片类型标注一下！！！
layer.alert 这个弹层需要 layer.js 文件