解码Image Base64字符串无法正常工作

I needed a way to compress a selected image from client side then send it to the server and i came up with the following code in img.onload :

我需要一种方法从客户端压缩选定的图像然后将其发送到服务器,我在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");

Then I send the base64 using ajax as follows:

然后我使用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);
}

in myImage.jsp , I use the following to decode the Base64 String:

在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);

I spent hours trying to make this work, I've tried many possibilities ( Like using different decoder packages, removing white spaces,etc ) It keeps on throwing javax.imageio.IIOException: Invalid JPEG file structure: two SOF markers or two soi and etc. It had few times written the bytes but the image was corrupted everytime, It was displaying a grey image instead the original.

我花了好几个小时试图做这个工作,我尝试了很多可能性(比如使用不同的解码器包,删除空格等)它继续投掷javax.imageio.IIOException:无效的JPEG文件结构:两个SOF标记或两个soi和它几次没有写入字节但是图像每次都被破坏了,它显示的是灰色图像而不是原始图像。

1 个解决方案

#1

I solved it. What i needed to do is to encode the base64 for url with the javascript method encodeURIComponent() . So the code that sends the base64 string looks like this:

我解决了我需要做的是使用javascript方法encodeURIComponent()为basel编码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);
}