解碼圖像Base64字符串不起作用

Question

我需要一種從客戶端壓縮所選圖像，然后將其發送到服務器的方法，我在img.onload中想到了以下代碼：

var canvas = document.createElement('canvas');
var img = document.createElement("img");
img.src = url;
var width = img.width;
var height = img.height;

if (width > height) {
if (width > max_width) {
  //height *= max_width / width;
  height = Math.round(height *= max_width / width);
  width = max_width;
}
} else {
if (height > max_height) {
  width = Math.round(width *= max_height / height);
  height = max_height;
}
}

canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);

var base64 = canvas.toDataURL("image/jpeg");

然后我使用ajax發送base64，如下所示：

function  sendImage(base64){
    var query = "number=0&id=012&base64="+base64;
            var url = "myImage.jsp";

            xmlHttp.open("POST", url, true);
            xmlHttp.onreadystatechange = postImgAjax;
            xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlHttp.setRequestHeader("Content-length", query.length);
            xmlHttp.setRequestHeader("Connection", "close");
            xmlHttp.send(query);
}

在myImage.jsp中，我使用以下代碼對Base64字符串進行解碼：

String imgBase64 = request.getParameter("base64");
    //BASE64Decoder d = new BASE64Decoder();
    String str = (imgBase64.split(",")[1]);
    //str = str.replaceAll(" ", "");
    //System.out.println("\n "+str.replaceAll("\n", ""));
    byte[] imgBytes = Base64.decodeBase64(str.getBytes());
    //d.decodeBuffer(str.replaceAll("\\s", ""));
            //DatatypeConverter.parseBase64Binary(str.replaceAll("\\s", ""));
    Utils.save(imgBytes);

我花了幾個小時嘗試使之工作，我嘗試了許多可能性（例如使用不同的解碼器包，刪除空格等），它不斷拋出javax.imageio.IIOException：無效的JPEG文件結構：兩個SOF標記或兩個soi和等等。它很少寫入字節，但是圖像每次都損壞，它顯示的是灰色圖像而不是原始圖像。

Answer 1

我解決了 我需要做的是使用javascript方法encodeURIComponent（）對base64進行url編碼。 因此，發送base64字符串的代碼如下所示：

function  sendImage(base64){
    var query = "number=0&id=012&base64="+encodeURIComponent(base64);
        var url = "myImage.jsp";
        xmlHttp.open("POST", url, true);
        xmlHttp.onreadystatechange = postImgAjax;
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlHttp.setRequestHeader("Content-length", query.length);
        xmlHttp.setRequestHeader("Connection", "close");
        xmlHttp.send(query);
}