1

Currently i am using AlternaTIFF to show TIFF files on browser in my ASP.NET application which used to work fine in all browser.

As the AlternaTIFF plugin uses Chrome's NPAPI plugin architecture - and this is completely discontinued by Google in future versions due to security concerns.

Is there any other way by which i can keep my site running in Chrome.. or I only have to survive with IE11+AlternaTIFF which is terrible.

too_cool
  • 1,164
  • 8
  • 24
  • 1
    Why on earth would you use an image format that is not more universally supported? Especially one that, as you've note, has security concerns, and is therefore purposely discontinued. PNG is the way to go nowadays. – durbnpoisn Sep 10 '15 at 13:56
  • @durbnpoisn cant change client requirement... – too_cool Sep 10 '15 at 14:00
  • As a followup to the previous comment, perhaps you should convert received tiff files to some other format, as shown in [this question](http://stackoverflow.com/questions/1566188/converting-tiff-files-to-png-in-net). The client may be providing you with .tiff files, but they're probably not going to care what they end up seeing. – mason Sep 10 '15 at 14:01
  • @too_cool... You are doing your client a disservice by allowing them to make you produce something that is non-standard, and a security risk. Take mason's advice and convert the images. – durbnpoisn Sep 10 '15 at 14:07
  • @mason i already have this implemented on my site .i show the png in `thumbnail` and when user click on it i need to show it. As one tif can contain 2 images i will not get the 2nd part...More or less i am in search of a way to show tif only with out making more changes to my code.. – too_cool Sep 10 '15 at 14:14
  • So find a library that allows you to get both images, and make equivalent PNG's for them? Asking for library recommendations on SO is off-topic. – mason Sep 10 '15 at 14:17

2 Answers2

1

You can use https://github.com/seikichi/tiff.js/

Example:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'yourUrlTiff');
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
if (xhr.status == 200) {
   var buffer = xhr.response;
   var arrayPagesFromTiff = [];
   var tiff = new Tiff({ buffer: buffer });
   for (var i ; i < tiff.countDirectory(); ++i) {
        tiff.setDirectory(i);
        arrayPagesFromTiff.push(tiff.toCanvas().toDataURL());
    }
}

From this way, you have an array of DataURI with each page TIFF file.

Carlos Andres Carrero
  • 51
  • 3
0
$(document).ready(function () {
 var fileTypes = ['tiff', 'tif'];  
  $("input:file").change(function (evt) {
      var parentEl = $(this).parent();
      var tgt = evt.target || window.event.srcElement,
                      files = tgt.files;

       if (FileReader && files && files.length) {
      var fr = new FileReader();
      var extension = files[0].name.split('.').pop().toLowerCase();
      fr.onload = function(e) {
        success = fileTypes.indexOf(extension) > -1;
        if (success) {        
          console.debug("Parsing TIFF image...");

          Tiff.initialize({
            TOTAL_MEMORY: 100000000
          });
          var tiff = new Tiff({
            buffer: e.target.result
          });
          var tiffCanvas = tiff.toCanvas();
          $(tiffCanvas).css({
            "max-width": "auto",
            "width": "auto",
            "height": "auto",
            "display": "block",
            "padding-top": "10px",
            "align":"center"
          }).addClass("preview");
          $(parentEl).append(tiffCanvas);
        }

      }
      fr.onloadend = function(e) {
        console.debug("Load End");
      }

      fr.readAsArrayBuffer(files[0]);

     }

  });


});

HTML-

<input type="file"/>
Sanjeet Chaudhary
  • 1