Doesn't work of local html file.....Need Guidance

ghost commented 7 years ago

Hi,

I have tried to use your utility to display tiff images contained in local html file on chrome browser but in vain.

Please let me know how can it be worked?

johnthad commented 7 years ago

There are links to some demos on the README. I opened the first link (view TIFF files), viewed the source, and adapted the first one. It displays a 300x300dpi, 1-bit, TIFF Group 4 image, reduced to 30% its full size:

<!doctype html>
<html>
  <head>
    <title>tiff.js demo</title>
  </head>
  <body>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="./tiff.min.js"></script>
    <script type="text/javascript">
$(function () {
  var loadImage = function (filename) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', filename);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function (e) {
      var buffer = xhr.response;
      var tiff = new Tiff({buffer: buffer});
      var width = tiff.width();
      var height = tiff.height();
      var data = tiff.toDataURL();
      var imgObj = document.createElement('img');
      imgObj.setAttribute('src', data);
      imgObj.addEventListener('load', function() {
        imgObj.setAttribute('width', width * 0.3);
        imgObj.setAttribute('height', height * 0.3);
        var $elem = $('<div><div><a href="' + filename + '">' +
                      filename +
                      ' (width: ' + width + ', height:' + height + ')' +
                      '</a></div></div>');
        $elem.append(imgObj);
        $('body').append($elem);
      }, false);
    };
    xhr.send();
  };
  loadImage('images/kofax.tif');
});
    </script>
  </body>
</html>

ghost commented 7 years ago

Hi John,

Thanks for your reply. I have tried your code, and display it on chrome, but in vain. Here is the error that I am getting:

index.html:36 XMLHttpRequest cannot load file:///E:/Linux%20Shared%20Resources/tiff%20files/image.tiff. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. loadImage @ index.html:36 (anonymous) @ index.html:38 c @ jquery-1.10.1.min.js:4 fireWith @ jquery-1.10.1.min.js:4 ready @ jquery-1.10.1.min.js:4 q @ jquery-1.10.1.min.js:4

Here is the complete code. tiff files.zip

Please guide me about it. I will be thankful to you.

ghost commented 7 years ago

Hi John,

I have just come to know that utility works well with the images shared in demo but not all kind of tiff images.

I have lot of tiff images which are not loaded using this utility on a browser. As sample, I am sharing some of the images which are not loaded at all.

sample data.zip

Please guide me. Any solution will be highly appreciated.

johnthad commented 7 years ago

First off, your 7th line in index.html will not work:

<img src="image.tiff" alt="Smiley face" height="42" width="42"/>

You're trying to load a TIFF as if it were a JPG, PNG, or GIF. That will never work. TIFFs are not native to browsers.

As to the JavaScript, the error message looks as if you are opening index.html from disk as a file URL. As the message says, you must use HTTP or HTTPS, which means your index.html must be served by a web server, not merely opened from disk. I have both Apache and Tomcat installed on my Macs. I'm serving my index.html from a folder inside my ~/Sites directory. If I put your folder in that directory and open it has HTTP in my browser it works (BTW, since your image is so small, you can comment out the the lines imgObj.setAttribute('width', width * 0.3) and imgObj.setAttribute('height', height * 0.3), #27 & #28.)

If you don't have Apache, NGINX, etc., a quick solution fine for testing is simplehttp2server (see https://github.com/GoogleChrome/simplehttp2server) by @DasSurma. You will have to change the JQuery src to https if you use simplehttp2server.

johnthad commented 7 years ago

If I put your images from sample data.zip in an images directory, list them as imageFiles in a copy of http://seikichi.github.io/tiff.js/basic.html, and serve the parent directory with simplehttp2server, they all display. You need a web server.

ghost commented 7 years ago

Thanks John for nice your explanation.

I want to ask about the following:

Is there any solution that works without webserver?
Secondly, I have a lot of local html files which contains file paths of tiff images pointed at local drive folder. Is there any solution which takes tiff image path, do what ever parsing, and show them in browser?

Please let me know about it.

johnthad commented 7 years ago

Not that I know of, at least not out-of-the-box. You could, of course, convert the TIFF images to PNG or another browser format using ImageMagick, but a dynamic solution will take some work.

Does anyone still make browser plugins? Applets? Years ago (and I mean over 15 years ago) there a few commercial plugins for, but for many reasons I handle all images with open source solutions. (For one thing, there are many bad TIFFs out there, and I frequently have to jump through hoops to open them.)

BTW, I've now tested tiff.js with the LibTIFF sample images. Impressive! It won't handle them all, but tiff.js does manage most.

seikichi / tiff.js

Doesn't work of local html file.....Need Guidance #23