javascript - 如何在 Internet Explorer 上显示多页 `.tif` 文件？

Question

我的要求是在浏览器上显示.tiff 图像。所以目前我正在使用 img 标签在 Internet Explore 上显示 tiff 文件，如下所示。

<img src="myTiff.tif" type="image/tiff" alt="My Tiff">

它与只有单页的 tif 文件完美配合。如果 .tif 中有多个页面，则 img 标签仅显示第一张图片。用户无法获得查看其他图像的选项。

Sample tiff image

我已经尝试了所有建议的选项 here

我在服务器端使用 C#，在前端使用 AngularJS。任何帮助将不胜感激。谢谢:)

编辑

使用 AltraTiff 插件会更好吗？我看起来像是在使用 Internet Explorer。

Answer 1

内容呈现始终是浏览器的责任，因此您依赖于它的功能。

也许某些浏览器有一些插件支持多页 tiff，但是，如果您无法控制客户端中安装的软件，我认为您最好的选择是通过在服务器端分离页面来实现一些分页。

您可以使用 imagemagick 轻松实现。

唯一的缺点是，如果用户尝试下载它，它只会下载他当前正在查看的单个页面。

但是您可以通过提供单独的下载链接或简单地将完整版本链接到显示的图像来缓解它。使用 jQuery 的示例:

<div id="tiffPager">
    <a href="myTiff.tif">
        <img width=200 height=200 data-pageCount=5 src="myTiff_page0.tif" alt="My Tiff">
    </a>
    <button class="pageBack">&lt;&lt;</button>
    <button class="pageForward">&gt;glt;</button>
</div>
<script>
    $(function(){
        var container = $("div#tiffPager");
        var img = $("img", container);
        var backBtn = $("button.pageBack", container);
        var fwBtn = $("button.pageForward", container);
        var pgCount = img.data("pageCount");
        var currPage = 0;

        backBtn.on("click", function(){
            currPage = (currPage + 1) % pgCount; // Cycle though pages.
            img.attr("src", "myTiff_page" + currPage + ".tif");
        });
        fwBtn.on("click", function(){
            currPage = (currPage - 1) % pgCount; // Cycle though pages.
            img.attr("src", "myTiff_page" + currPage + ".tif");
        });

    });
</script>