在浏览器中显示多页 tiff答案

【问题标题】：display multi page tiff in browser在浏览器中显示多页 tiff
【发布时间】：2016-06-12 08:29:25
【问题描述】：

我想知道是否有任何方法可以让我使用客户端编码（而不是服务器端）在浏览器中显示多页 tif 图像，以便用户可以在常见的页面之间导航jquery 照片库。我从https://github.com/seikichi/tiff.js找到了tiff.js，但是这个库只给出了多页tiff的下载链接，并没有在html中显示。

我可以使用 ImageMagic、LibTiff.Net 等库在服务器端执行此操作，但我不想这样做，因为照片数量很大，如果这样做会消耗大量服务器的 cpu

您知道任何替代解决方案吗？？

【问题讨论】：

将所有多页tiffs 预处理为pngs 并存储它们。给出一个页面，其中有几个隐藏的position:fixed<img>s 并在 JS 中取消隐藏它们。不是一个非常优雅的选择，但非常强大并且具有良好的浏览器支持。
或使用 ImageMagick 或任何其他工具将 tiff 直接预处理为 PDF，并在客户端使用 PDF.js 来处理显示。无论是服务器端还是客户端都必须进行处理。我们还在谈论网络预览，我想高分辨率并不是那么需要。

标签： javascript jquery imagemagick tiff

【解决方案1】：

我也遇到了这个问题，转换图像不是我们的选择。

您可以使用链接到的 tiff.js，查看演示，然后在 http://seikichi.github.io/tiff.js/multipage.html 查看源代码。

$(function () {
  Tiff.initialize({TOTAL_MEMORY: 16777216 * 10});
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'images/multipage.tiff');
  xhr.responseType = 'arraybuffer';
  xhr.onload = function (e) {
    var buffer = xhr.response;
    var tiff = new Tiff({buffer: buffer});
    for (var i = 0, len = tiff.countDirectory(); i < len; ++i) {
      tiff.setDirectory(i);
      var canvas = tiff.toCanvas();
      $('body').append(canvas);
    }
  };
  xhr.send();
});

将“images/multipage.tiff”替换为您的文件路径，它会将每个页面添加到正文元素（如果您想要在其他地方使用您的元素，只需替换 $('body')）。也适用于单个 tiff。

【讨论】：

【解决方案2】：

浏览器不支持 tif 图片。检查这个Wiki Link。您必须生成 png 图像并将其存储并在 tif 的浏览器中显示。

【讨论】：