解码图像Base64字符串无效

Decoding Image Base64 String not working

本文关键字：无效 字符串 Base64 图像 解码      更新时间：2023-09-26

我需要一种方法来压缩客户端选择的图像，然后将其发送到服务器，我在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等等。它写了几次字节，但每次图像都被破坏了，它显示的是灰色图像，而不是原始图像。

我解决了这个问题。我需要做的是用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);
}
相关文章：