在javascript中从servlet呈现blob

我试图通过GetImage servlet从数据库中获取字节数组， 然后通过响应推送数组，并在ImgGet（）函数中将blob渲染为图像，并使其出现在某个元素上。 我没有得到任何错误，只是照片是坏精灵（铬），就像它无法读取资源或其他东西。 函数返回正确的字节数组

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

读取，它显示为损坏图像的原因（假设您得到正确的响应）可能是因为没有为标头设置正确的值，该标头告诉服务器它应该发送什么类型的数据，默认情况下，这将是“DOMString”，它是UTF-16，因此所有字节都被视为UTF-16，并以这种方式解码。请注意，该值实际上用于浏览器，以便它能够正确解码

要使其正常工作，您需要在

send（）

ajax请求之前设置此标头

xhr.responseType='arraybuffer'；

---

或者

xhr.responseType='blob'；

是的，我没有注意到。谢谢。