How Would I Display a Tiff Images in All Web Browsers

How would I display a TIFF images in all web browsers?

This comes down to browser image support; it looks like the only mainstream browser that supports tiff is Safari:

http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

Where are you getting the tiff images from? Is it possible for them to be generated in a different format?

If you have a static set of images then I'd recommend using something like PaintShop Pro to batch convert them, changing the format.

If this isn't an option then there might be some mileage in looking for a pre-written Java applet (or another browser plugin) that can display the images in the browser.

Displaying the base64 tiff images in HTML

According to this link, Chrome doesn't support tiff image type. So you will have to convert it some other format(.jpg,.jpeg etc) and then show it in your html page.

display multi page tiff in browser

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.

---

Related Topics