Question

我正在开发一个Web应用程序，我尝试显示从服务器请求的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中将数据作为arraybuffer获取。

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

阅读使用JavaScript

2 个答案: