CODEWITHSUNDEEP
javascriptasp.netinternet-explorertiff
Pankaj Parkar
Pankaj Parkar

Reputation: 136134

How to show multiple page `.tif` file on Internet Explorer?

My requirement is to show .tiff image on browser. So currently I'm showing tiff file on Internet Explore using img tag like below.

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

And it works perfect with the tif file having only single page. In case there would an multiple pages in .tif then the img tag only shows 1st image. User can not get option to view other image.

Sample tiff image

I already tried all the option suggested here

I'm using C# on server side & on front end using AngularJS. Any help would appreciated. Thanks :)

Edit

Would it be better way to go with AltraTiff plugin? I looks like working on Internet Explorer.

Upvotes: 1

Views: 3006

Answers (1)

bitifet
bitifet

Reputation: 3659

Content rendering is always browser's responsibility so you rely in its capabilities.

Maybe there is some plugin for some browser that supports multiple-page tiffs, but, if you can't control software installed in your clients, I think your best option would be to implement some pagination by separating pages server side.

You can achieve that easily with imagemagick.

The only drawback is that, if user try to download it, it will download only the single page he were currently viewing.

But yo can mitigate it by providing separate download link or, simply, linking full version to the displayed image. Example using 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>

Upvotes: 2

Related Questions