Отображение существующего файла TIFF с помощью библиотеки seikichi / 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.


javascript image tiff libtiff
person Tahi    schedule 17.03.2017    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Сначала вам нужно преобразовать файл из TIFF. Прямо сейчас файл передается как двоичный файл, и браузер не знает, что с ним делать, поэтому вместо этого он просит пользователя загрузить.

Вам действительно нужно использовать библиотеку tiff для анализа и преобразования файла во что-то, что может отображать браузер.

Шаги просты:

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

Но сначала вам нужно преобразовать файловый BLOB-объект в ArrayBuffer. Для этого вы можете использовать FileReader(). Затем, когда у вас есть ArrayBuffer, передайте его в экземпляр TIFF. Затем результат преобразуется в холст и отображается.

Живой пример

снимок

Примечание: для производства вы, конечно, должны реализовать проверки, чтобы увидеть, действительно ли файл является 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>

person Community    schedule 17.03.2017
comment
можете ли вы привести пример кода для просмотра нескольких изображений? - person Tahi; 19.03.2017
comment
@FazidiIjtihad добавил пример загрузки нескольких файлов (важно использовать ключевое слово this (т.е. this.result) внутри обратного вызова обработчика, как этот пример настроен). - person ; 19.03.2017
comment
Вы нашли решение для изображений URL? В моем случае браузер всегда принудительно загружает - person Juan I. Morales Pestana; 21.10.2019
comment
Я искал способ изменить размер этого изображения холста, и после некоторых копаний я нашел это: canvas.setAttribute ('style', 'width:' + (width * 0.3) + 'px; height:' + (height * 0.3) + 'px'); - person Moran Barzilay; 19.11.2020