Render blob from servlet in javascript
<p>I am trying to get a byte array from my database through the GetImage servlet,
then push the array through the response and in the ImgGet() function render the blob as an image and make it appear on a certain element.
I dont get any errors, just the photo is broken sprite(chrome), like it fails to read the resource or sth.
The <code>getPhotoBlobWithID</code> function returns the correct byte array.</p>

<p>Servlet:</p>

<pre><code>@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);
            }   

}
</code></pre>

<p>Javascript: </p>

<pre><code>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+"&amp;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();
}
</code></pre>