javascript - 使用seikichi/tiff库显示现有的TIFF文件

这是我用来从输入元素加载文件的JavaScript代码。图像格式包括jpeg，png，tiff。

$(document).ready(function() {
  FileDetails = function() {

    var input = document.getElementById('fileUpload');
    var output = document.getElementById('tblUpload');

    //' + (URL || webkitURL).createObjectURL(input.files[i]) +'

    output.innerHTML = '<tr>';
    output.innerHTML += '<th class="thStyle" style="width: 400px;"><b>File Name</b></th><th class="thStyle" style="width: 150px;"><b>Preview Image</b></th>';
    for (var i = 0; i < input.files.length; ++i) {

      output.innerHTML += '<td style="padding: 10px; width: 400px;">' +
        input.files[i].name + '</td>' +
        '<td style="padding: 10px; width: 150px; color: #0d47a1">' +
        '<a target="_blank" href="' + (URL || webkitURL).createObjectURL(input.files[i]) + '">Show</a></td>';

    }
    output.innerHTML += '</tr>';
  }
});

现在，如何使用seikichi/tiff库显示tiff文件？

我一直在测试各种图片格式，但是tiff文件格式总是要求下载。可以显示其他诸如jpeg，png的图像。

最佳答案

您需要先从TIFF转换文件。现在，该文件被作为二进制文件处理，浏览器不知道如何处理它，因此它要求用户下载。
您实际上需要使用tiff库来解析文件并将其转换为浏览器可以显示的内容。
步骤很简单:

var tiff = new Tiff({buffer: arrayBuffer});
var canvas = tiff.toCanvas();

但是首先需要将File blob转换为ArrayBuffer。为此，您可以使用FileReader()。然后，当您拥有ArrayBuffer时，将其传递给TIFF实例。然后将结果转换为 Canvas 并显示。
现场例子

注意:对于生产，您当然必须实现检查以查看文件是否确实是Tiff(例如，通过使用file.type)，错误处理等。

document.querySelector("input").onchange = function() {

  // convert File blob to ArrayBuffer using a FileReader
  var fileReader = new FileReader();

  fileReader.onload = function() {                     // file is now ArrayBuffer:
    var tiff = new Tiff({buffer: this.result});        // parse and convert
    var canvas = tiff.toCanvas();                      // convert to canvas
    document.querySelector("div").appendChild(canvas); // show canvas with content
  };

  fileReader.readAsArrayBuffer(this.files[0]);         // convert selected file
};

<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<label>Select TIFF file: <input type=file></label><div></div>

因此，要加载多个文件，您将在循环中执行相同的操作:

document.querySelector("input").onchange = function() {

  var files = this.files, fileReader;

  for(var i = 0; i < files.length; i++) {
    fileReader = new FileReader();
    fileReader.onload = handler;
    fileReader.readAsArrayBuffer(files[i]);            // convert selected file
  }

  function handler() {                                 // file is now ArrayBuffer:
    var tiff = new Tiff({buffer: this.result});        // parse and convert
    var canvas = tiff.toCanvas();                      // convert to canvas
    document.querySelector("div").appendChild(canvas); // show canvas with content
  };
};

<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<label>Select TIFF file: <input type=file multiple></label><div></div>

关于javascript - 使用seikichi/tiff库显示现有的TIFF文件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42847915/