Lesen Antwort erhalten mit TIFF-Datei in JavaScript

Question

Ich entwickle eine Web-Anwendung, wo ich versuche, TIFF-Datei von einem Server angefordert anzuzeigen. Ich verwende this approach, um eine TIFF-Datei anzuzeigen, aber ich muss ein Bild von einem Server über eine GET-Anfrage erhalten, anstatt die Datei von einem lokalen Computer zu öffnen.

Auf der Serverseite verwende ich ein Spark-Java-Framework, um eine Antwort zu senden. Dies ist der Java-Code zu diesem Zweck:

get("tiff", (request, response) -> { 
     byte[] bytes = Files.readAllBytes(Paths.get("temp/201600004068.tif")); 
     HttpServletResponse raw = response.raw(); 
     raw.setContentType("image/tiff"); 
     raw.getOutputStream().write(bytes); 
     raw.getOutputStream().flush(); 
     raw.getOutputStream().close(); 
     return raw; 
    }); 

ich nicht herausfinden kann, wie die Antwort (Eingangsstrom in Reaktion) in JavaScript zu handhaben Sie die Datei mit FileReader() zu lesen.

$.get("/tiff", function(data) { 
    var parentEl = $(this).parent(); 
    var fr = new FileReader(); 
    fr.onload = function(e) { 
    //Using tiff.min.js library - https://github.com/seikichi/tiff.js/tree/master 
    console.debug("Parsing TIFF image..."); 
    //initialize with 100MB for large files 
    Tiff.initialize({ 
    TOTAL_MEMORY: 100000000 
    }); 
    var tiff = new Tiff({ 
    buffer: e.target.result 
    }); 
    var tiffCanvas = tiff.toCanvas(); 
    $(tiffCanvas).css({ 
    "max-width": "1000000px", 
    "width": "100%", 
    "height": "auto", 
    "display": "block", 
    "padding-top": "10px" 
    }).addClass("preview"); 
    $(parentEl).append(tiffCanvas); 
} 

fr.onloadend = function(e) { 
    console.debug("Load End"); 
} 
    fr.readAsArrayBuffer(data);  }); 

Wenn ich versuche, um die Antwort zu setzen direkt in fr.readAsArrayBuffer(data); ich Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob' einen Fehler bekam.

Wenn ich versuche, einen Blob zu erstellen auf der Grundlage der Antwort

var blob = new Blob([data], {type: 'image/tiff'}); 
    fr.readAsArrayBuffer(blob); 

es nicht in der Lage ist TIFF-Datei zu analysieren.

Meine Antwort sieht wie folgt aus:

und ich verstehe nicht, die Bedeutung dieser Reaktion.

Wie kann ich die Datei von dieser Antwort abrufen?

Danke für jede Hilfe!

Answer 1

Basierend auf der Antwort von Sandeep gelang es mir, das Ziel meiner Frage zu erreichen. Es ist möglich, XMLHttpRequest() zu verwenden, um die rohe Antwort des Servers zu lesen, anstatt sie aus einem Quellordner zu lesen.

So fordern Bild von javascript:

var xhr = new XMLHttpRequest(); 
xhr.responseType = 'arraybuffer'; 

xhr.open('get', "/image?imageName=" + imageName); 
xhr.onload = function (e) { 
    Tiff.initialize({ 
     TOTAL_MEMORY: 100000000 
    }); 
    var tiff = new Tiff({ 
     buffer: arrayBuffer 
    }); 

    *//...Any manipulation with tiff file* 
}; 
xhr.send(); 

auf der Serverseite Handhabung Anfrage und rohe Antwort zurück:

get("/image", (request, response) -> { 
    String imageName = request.queryParams("imageName"); 
    response.raw().setContentType("image/tiff"); 
    response.raw().setHeader("Content-Disposition","attachment; filename=image.tiff"); 
    Path path = Paths.get(IMAGE_DESTINATION + "/" + imageName); 
    byte[] data = null; 
    try { 
     data = Files.readAllBytes(path); 
    } catch (Exception e) { 
     e.printStackTrace(); 
    } 
    OutputStream out = response.raw().getOutputStream(); 
    out.write(data); 
    out.flush(); 
    out.close(); 
    return response.raw(); 
}); 

Answer 2

Ich bevorzuge XMLHttpRequest. Da Sie Bytes schreiben, können Sie die Daten als Array-Puffer in XMLHttpRequest erhalten.

var xhr = new XMLHttpRequest(); 
xhr.open('GET', "assets/tif/sample.tif", true); 
xhr.responseType = 'arraybuffer'; 

xhr.onload = function(e) { 
    var arrayBuffer = this.response; 
    Tiff.initialize({ 
     TOTAL_MEMORY: 100000000 
    }); 
    var tiff = new Tiff({ 
     buffer: arrayBuffer 
    }); 
    var dataUrI = tiff.toDataURL(); 
    console.log(dataUrI); 

}; 
xhr.send();