使用seikichi / tiff库显示现有TIFF文件 [英] Display Existing TIFF File Using the seikichi/tiff Library

问题描述

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

This is the JavaScript code I use to load files from an input element. Image format includes 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文件？

Now, how can I use the seikichi/tiff library to display tiff files?

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

I have been testing all sort of picture formats but the tiff files format always asks to be downloaded. Others such as jpeg, png can be displayed.

推荐答案

您需要先从TIFF转换文件。现在，文件作为二进制文件传递，浏览器不知道如何处理它，因此它要求用户下载。

You need to convert the File from a TIFF first. Right now the file is handed as a binary file and the browser doesn't know what to do with it, hence it asks the user to download instead.

你需要实际上使用tiff库来解析文件并将其转换为浏览器可以显示的内容。

You need to actually use the tiff library to parse and convert the file to something the browser can display.

步骤很简单：

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

但您首先需要将File blob转换为 ArrayBuffer 。为此，您可以使用 FileReader（）。然后当你有 ArrayBuffer 将它传递给TIFF实例时。然后将结果转换为画布并显示。

But you first needs to convert the File blob into an ArrayBuffer. For this you can use FileReader(). Then when you have the ArrayBuffer pass it to an TIFF instance. The result is then converted to a canvas and shown.

注意：对于生产，您当然必须执行检查以查看是否文件确实是Tiff（例如使用 file.type ），错误处理等。

Note: for production you have to of course implement checks to see if the file is indeed a Tiff (for example by using file.type), error handling etc.

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>

所以要加载多个文件，你会在循环中做同样的事情：

So to load multiple files you would do the same in a loop:

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>

这篇关于使用seikichi / tiff库显示现有TIFF文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！