在 JavaScript 中使用 TIFF 文件读取获取响应

Question

我正在开发一个网络应用程序，我尝试在其中显示从服务器请求的 TIFF 文件。我使用this approach 显示 TIFF 文件，但我需要通过 GET 请求从服务器获取图像，而不是从本地计算机打开文件。

在服务器端，我使用 Spark-Java 框架来发送响应。这是用于此目的的 Java 代码：

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;
    });

我不知道如何在 JavaScript 中处理响应（响应中的输入流）来读取带有FileReader() 的文件。

$.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);      });

当我尝试将响应直接放入 fr.readAsArrayBuffer(data); 时，出现错误 Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'。

当我尝试根据响应创建 Blob 时

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

它无法解析 TIFF 文件。

我的回复是这样的：

我不明白那个回复的含义。

那么我如何从这个响应中检索文件？

感谢您的帮助！

Answer 1

根据 Sandeep 的回答，我设法实现了我的问题目标。 可以使用 XMLHttpRequest() 来读取服务器的原始响应，而不是从源文件夹中读取。

所以，从 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();

在服务器端处理请求并返回原始响应：

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

我更喜欢 XMLHttpRequest 。由于您正在写入字节，因此您可以在 XMLHttpRequest 中将数据作为数组缓冲区获取。

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();