Question

我试图通过GetImage servlet从我的数据库中获取一个字节数组，然后通过响应推送数组，并在ImgGet（）函数中将blob渲染为图像并使其出现在某个元素上。我没有得到任何错误，只是照片是破碎精灵（铬），就像它无法读取资源或...... 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();
}

Answer 1

如果我弄错了你正在请求一个图像作为原始字节流，你稍后将其作为Blob并使用Filereader读取，这就是为什么它显示为一个破碎的图像（假设您得到正确的响应）可能是由于没有为responseType标头设置正确的值，告诉服务器它应该发送什么类型的数据，默认情况下这将是＆＃34; DOMString这是UTF-16所以所有字节都被视为UTF-16并以这种方式解码。注意这个值实际上是浏览器，以便它可以正确解码

要使其正常工作，您需要在send() ajax请求之前设置此标头。您可以使用

xhr.responseType = 'arraybuffer';

或xhr.responseType = 'blob';

在javascript

1 个答案: