圖片裁剪，數據流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 文件