base 64符号化ピクチャデータストレージサーバ
3517 ワード
base 64符号化ピクチャデータストレージサーバ
base 64符号化ピクチャデータを直接コミットすると、バックグラウンドで転送エラーが発生します.
私はbase 64符号化ピクチャデータに接触し始めたばかりの頃、base 64符号化ピクチャデータをバックグラウンドに転送して生成ピクチャを復号しました.生成されたピクチャが開くことができず、バックグラウンドに転送されたbase 64符号化が完全ではなく、復号化に問題があり、ピクチャを表示できないことに気づいた.したがって、base 64符号化は、フロントエンドでしか処理できない.
その後、資料を調べると、base 64で符号化された画像データをBlob(Fileと似ている)に変換し、formに追加して提出するのが良い解決策だ.コードは次のとおりです.
最後に、バックグラウンドにコミットされるのはBlobタイプのデータなので、ファイル名がなく、名前とタイプの再命名を強制する必要があります.
ここではspringMVC注釈方式でリクエストを受信しています.orgを通過する.springframework.web.multipart.MultipartHttpService Requestでファイルを入手できます.
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