Render blob from servlet в javascript

Question

Я пытаюсь получить массив байтов из моей базы данных с помощью сервлета GetImage, , а затем массировать массив через ответ и в функции ImgGet() визуализировать blob как изображение и заставить его отображаться на определенный элемент. Я не получаю никаких ошибок, просто фото сломанный спрайт (хром), например, он не может прочитать ресурс или sth. Функция 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, который сообщает серверу, какой тип данных он должен отправлять, по умолчанию это будет «DOMStri ng, который является UTF-16, поэтому все байты обрабатываются как UTF-16 и декодируются таким образом. Обратите внимание, что это значение действительно для браузера, чтобы оно могло правильно декодировать

Чтобы сделать его работу, вам необходимо установить этот заголовок раньше вы send() Аякса request.You можно использовать либо

xhr.responseType = 'arraybuffer';

или xhr.responseType = 'blob';