javascript - 在 javascript 中从 servlet 渲染 blob

Question

我正在尝试通过 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();
}

Answer 1

如果我得到正确的结果，您正在请求一个图像作为原始字节流，稍后您将其放入 Blob 并使用 Filereader 读取它，这就是它显示的原因作为损坏的图像(假设您得到正确的响应)可能是由于没有为 responseType 设置正确的值header 告诉服务器应该发送什么类型的数据，默认情况下这将是“DOMString，它是 UTF-16，因此所有字节都被视为 UTF-16 并以这种方式解码。请注意，该值实际上是针对浏览器的，因此它可以正确解码

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

xhr.responseType = 'arraybuffer';

或xhr.responseType = 'blob';