我正在尝试通过 GetImage servlet 从数据库获取字节数组,
然后将数组推送到响应中,并在 ImgGet() 函数中将 blob 渲染为图像并使其出现在某个元素上。
我没有收到任何错误,只是照片被破坏了 Sprite ( Chrome ),就像它无法读取资源或某物一样。
getPhotoBlobWithID
函数返回正确的字节数组。
Servlet:
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
boolean metadata = Boolean.valueOf(request.getParameter("metadata"));
int id = Integer.parseInt(request.getParameter("image"));
ServletOutputStream out = response.getOutputStream();
response.setContentType("image/jpeg");
try {
if ( metadata ){
String imgMeta = db.PhotosDB.getPhotoMetadataWithID(id).toString();
//out.println(imgMeta);
}
else{
String imgBlob = Arrays.toString(db.PhotosDB.getPhotoBlobWithID(id));
byte[] picBytes = db.PhotosDB.getPhotoBlobWithID(id);
out.write(picBytes);
out.flush();
out.close();
}
} catch (ClassNotFoundException ex) {
Logger.getLogger(GetImageCollection.class.getName()).log(Level.SEVERE, null, ex);
}
}
Javascript:
function ImgGet(id){
var xhr = new XMLHttpRequest();
var reader = new FileReader();
var placeholder = document.getElementById("CollectionContainer");
var elem = document.createElement("img");
//Change request parameters for desired result
xhr.open("GET", "GetImage?image="+id+"&metadata=false" ,true);
//xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = function () {
if (xhr.status === 200) {
//var base64data;
var arrayBuffer = xhr.response;
//var byteArray = new Uint8Array(arrayBuffer);
var blob = new Blob([arrayBuffer], {type: "image/png"});
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function() {
base64data = reader.result;
var newimg = document.createElement("img");
newimg.setAttribute("src",base64data);
document.getElementById("CollectionContainer").appendChild(newimg);
};
}
else{
alert('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
}
最佳答案
如果我得到正确的结果,您正在请求一个图像作为原始字节流,稍后您将其放入 Blob
并使用 Filereader
读取它,这就是它显示的原因作为损坏的图像(假设您得到正确的响应)可能是由于没有为 responseType
设置正确的值header 告诉服务器应该发送什么类型的数据,默认情况下这将是“DOMString,它是 UTF-16,因此所有字节都被视为 UTF-16 并以这种方式解码。请注意,该值实际上是针对浏览器的,因此它可以正确解码
要使其正常工作,您需要在 send()
ajax 请求之前设置此 header 。您可以使用
xhr.responseType = 'arraybuffer';
或xhr.responseType = 'blob';
关于javascript - 在 javascript 中从 servlet 渲染 blob,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41036773/