CODEWITHSUNDEEP
asp.netbrowsertiff
too_cool
too_cool

Reputation: 1194

How to show TIFF files in browser

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.

Upvotes: 1

Views: 2177

Answers (2)

Sanjeet Chaudhary
Sanjeet Chaudhary

Reputation: 1

$(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"/>

Upvotes: 0

Carlos Andres Carrero
Carlos Andres Carrero

Reputation: 51

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.

Upvotes: 1

Related Questions