I'd like to know if there is any way so that I can display a multi-paged tif image in browser using client-side coding (not server-side) in a way that user can navigate between the pages like mon jquery photo libraries. I found Tiff.js from .js, but this library only gives download link of multi-paged tiff and do not display it in html.

I can do it in server-side using libraries like ImageMagic, LibTiff.Net etc but don't want to because the number of photos are huge and if I do that it consume the large amount of server's cpu

do you know any alternative solution??

I'd like to know if there is any way so that I can display a multi-paged tif image in browser using client-side coding (not server-side) in a way that user can navigate between the pages like mon jquery photo libraries. I found Tiff.js from https://github./seikichi/tiff.js, but this library only gives download link of multi-paged tiff and do not display it in html.

I can do it in server-side using libraries like ImageMagic, LibTiff.Net etc but don't want to because the number of photos are huge and if I do that it consume the large amount of server's cpu

do you know any alternative solution??

• javascript
• jquery
• imagemagick
• tiff

• 1 Pre-process all multi-paged tiffs into pngs and store them. Give out a page with several hidden position:fixed <img>s and unhide them in JS. Not a very elegant option but very robust and with good browser support. – grochmal Commented Jun 12, 2016 at 16:58
• Or preprocess tiff directly to PDF with ImageMagick or any other tool and use PDF.js on client side to handle the display. Either way server side or client side will have to do the processing. Also we are talking about web preview I guess high resolution is not that much needed. – rostok Commented Jun 13, 2016 at 11:54

2 Answers 2

I had this problem too and converting the images was not an option for us.

You can use tiff.js that you linked to, have a look at the demo and then view source at 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();
});

Replace 'images/multipage.tiff' with the path to your file and it will add each page to the body element (just replace $('body') with your element if you want it somewhere else). Works with single tiff as well.

Browsers won't support tif images. check this Wiki Link. You have to generate a png image and store it and show that in browser for the tif.