base 64符号化ピクチャデータストレージサーバ


base 64符号化ピクチャデータストレージサーバ
base 64符号化ピクチャデータを直接コミットすると、バックグラウンドで転送エラーが発生します.
私はbase 64符号化ピクチャデータに接触し始めたばかりの頃、base 64符号化ピクチャデータをバックグラウンドに転送して生成ピクチャを復号しました.生成されたピクチャが開くことができず、バックグラウンドに転送されたbase 64符号化が完全ではなく、復号化に問題があり、ピクチャを表示できないことに気づいた.したがって、base 64符号化は、フロントエンドでしか処理できない.
その後、資料を調べると、base 64で符号化された画像データをBlob(Fileと似ている)に変換し、formに追加して提出するのが良い解決策だ.コードは次のとおりです.
$(".avatar-save").on("click", function() {
		var img_lg = document.getElementById('imageHead');
		//            
		html2canvas(img_lg, {
			allowTaint: true,
			taintTest: false,
			onrendered: function(canvas) {
				canvas.id = "mycanvas";
				//  base64    
				var dataUrl = canvas.toDataURL("image/png");
				var newImg = document.createElement("img");
				newImg.src = dataUrl;
				imagesAjax(dataUrl);//  base64    
			}
		});
	})
//dataUrl	base64    
function imagesAjax(dataUrl) {
		//    form            ,               FormData        
    		var formData = new FormData();//var formData = new FormData(form);
   		//convertBase64UrlToBlob    base64     Blob
   		//append                   , html   input name      
   		formData.append("ImgBase64",convertBase64UrlToBlob(dataUrl));  
   		console.log(formData);
    		//ajax   form
		$.ajax({
			url:'uploadImage.action',
			type:'POST',
			data:formData,
			 dataType:"text",
      		 	processData : false,         //   jQuery          
       		 	contentType : false,        //   jQuery     Content-Type   
			success: function(data) {
				 top.layer.alert("      !");
				 window.location.reload();//       
			},
			error:function(){
                    top.layer.alert("      ,        !")
            }
		});
	}
/**
	 *   base64   url     Blob
	 * 	@param urlData
	 *    url     base64    
	 */
	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'});
	}

最後に、バックグラウンドにコミットされるのはBlobタイプのデータなので、ファイル名がなく、名前とタイプの再命名を強制する必要があります.
ここではspringMVC注釈方式でリクエストを受信しています.orgを通過する.springframework.web.multipart.MultipartHttpService Requestでファイルを入手できます.
/**
	 *  /  /    
	 * @param request
	 * @return
	 */
	@ResponseBody
	@RequestMapping(method = RequestMethod.POST,value="information/uploadImage")
	public String uploadImage(HttpServletRequest request,HttpSession session){
		String basePath = request.getSession().getServletContext().getRealPath("upload");
		Manager manager= (Manager)session.getAttribute("manager");
		JSONObject obj = new JSONObject();
		//              
		List> fileName = UploadFileUtil.uploadBlodImage(request,"/image");
		Accessory accessory = new Accessory();
		for (Map map : fileName) {
			//      
			accessory.setAccessoryName(map.get("fileName"));
			//      
			accessory.setUuidFileName(map.get("newFilePath"));
			//        
			accessory.setValueSize(map.get("valueSize"));
			//                  
			managerService.addOrUpdateManagerToAccessory(accessory, manager.getId(), basePath);
		}
		return obj.toString();
	}	
}