如何在浏览器中显示 TIFF 文件答案

【问题标题】：How to show TIFF files in browser如何在浏览器中显示 TIFF 文件
【发布时间】：2023-04-09 17:17:01
【问题描述】：

目前我正在使用AlternaTIFF 在我的 ASP.NET 应用程序中的浏览器上显示 TIFF 文件，该应用程序在所有浏览器中都可以正常工作。

由于 AlternaTIFF 插件使用 Chrome 的 NPAPI 插件架构 - 出于安全考虑，这完全是 Google 在未来版本中的 discontinued。

有没有其他方法可以让我的网站在 Chrome 中运行.. 或者我只需要在 IE11+AlternaTIFF 下生存，这太糟糕了。

【问题讨论】：

您到底为什么要使用不受普遍支持的图像格式？正如您所注意到的，尤其是一个存在安全问题的产品，因此被故意停产。 PNG 是当今的发展方向。
@durbnpoisn 无法更改客户要求...
作为上一条评论的后续，也许您应该将收到的 tiff 文件转换为其他格式，如 this question 所示。客户可能会向您提供 .tiff 文件，但他们可能不会关心最终看到的内容。
@too_cool... 允许他们让您生产非标准的产品，并且存在安全风险，这对您的客户造成了伤害。听取梅森的建议并转换图像。
@mason 我已经在我的网站上实现了这个。我在thumbnail 中显示 png 并且当用户点击它时我需要显示它。由于一个 tif 可以包含 2 张图像，我不会得到第二部分...或多或少我正在寻找一种仅显示 tif 而不对我的代码进行更多更改的方法..

标签： asp.net browser tiff

【解决方案1】：

你可以使用https://github.com/seikichi/tiff.js/

例子：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'yourUrlTiff');
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
if (xhr.status == 200) {
   var buffer = xhr.response;
   var arrayPagesFromTiff = [];
   var tiff = new Tiff({ buffer: buffer });
   for (var i ; i < tiff.countDirectory(); ++i) {
        tiff.setDirectory(i);
        arrayPagesFromTiff.push(tiff.toCanvas().toDataURL());
    }
}

通过这种方式，每个页面的 TIFF 文件都有一个 DataURI 数组。

【讨论】：

【解决方案2】：

$(document).ready(function () {
 var fileTypes = ['tiff', 'tif'];  
  $("input:file").change(function (evt) {
      var parentEl = $(this).parent();
      var tgt = evt.target || window.event.srcElement,
                      files = tgt.files;

       if (FileReader && files && files.length) {
      var fr = new FileReader();
      var extension = files[0].name.split('.').pop().toLowerCase();
      fr.onload = function(e) {
        success = fileTypes.indexOf(extension) > -1;
        if (success) {        
          console.debug("Parsing TIFF image...");

          Tiff.initialize({
            TOTAL_MEMORY: 100000000
          });
          var tiff = new Tiff({
            buffer: e.target.result
          });
          var tiffCanvas = tiff.toCanvas();
          $(tiffCanvas).css({
            "max-width": "auto",
            "width": "auto",
            "height": "auto",
            "display": "block",
            "padding-top": "10px",
            "align":"center"
          }).addClass("preview");
          $(parentEl).append(tiffCanvas);
        }

      }
      fr.onloadend = function(e) {
        console.debug("Load End");
      }

      fr.readAsArrayBuffer(files[0]);

     }

  });


});

HTML-

<input type="file"/>

【讨论】：

添加一些解释