解码图像 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() 为 url 编码 base64。所以发送 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);
}

解码图像 Base64 字符串不起作用

Decoding Image Base64 String not working

javascript

java

base64

byte

image