解码图像 Base64 字符串不起作用
Decoding Image Base64 String not working
我需要一种从客户端压缩选定图像然后将其发送到服务器的方法,我在 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);
}
我需要一种从客户端压缩选定图像然后将其发送到服务器的方法,我在 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);
}