Display an image as .tiff or .tif

Question

Not how to do this process and consulted but did not reach, if I can help.

probe what went something like this:

    var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        context = document.getElementById("mycanvas").getContext("2d"),
        img     = new Image();

    // wait until the image has been fully processed
    img.onload = function() {
        context.drawImage(img, 100, 100);
    };
img.src = 'url_imagen';
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);

With all the contributions realize but try and if it works.

Point run to desert, poker images having resolution jpg my delivers the following error:

TIFFReadDirectory: Warning, Unknown field with tag 347 (0x15b) encountered. tiff_min.js (línea 103) 1.tiff: JPEG compression support is not configured. tiff_min.js (línea 103) 1.tiff: Sorry, requested compression method is not configured. tiff_min.js (línea 103) uncaught exception: [object Object]

The probe code that is this:

Tiff.initialize({TOTAL_MEMORY: 19777216 * 10});
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'arraybuffer';
        xhr.open('GET', url);
        xhr.onload = function (e) {
            var tiff = new Tiff({buffer: xhr.response,height:450});
            var canvas = tiff.toCanvas();
            //canvas.width = 700;
            //canvas.height = 450;
            div.html(canvas);
            msn('Imagen cargada', "Imagen cargada con exito.");
        };
        xhr.send();

score 10 · Accepted Answer · edited May 23 '17 at 12:33

10

As answered here and here, it all comes down to browser support.

You can however get the image as binary data and display it using a library:

https://github.com/seikichi/tiff.js

https://code.google.com/p/tiffus/

https://github.com/GPHemsley/tiff-js

edited May 23 '17 at 12:33

Community

1
1

answered Jul 27 '15 at 15:34

cviejo

4,388
19
30

Point run to desert, poker images having resolution jpg my delivers the following error: TIFFReadDirectory: Warning, Unknown field with tag 347 (0x15b) encountered. tiff_min.js (línea 103) 1.tiff: JPEG compression support is not configured. tiff_min.js (línea 103) 1.tiff: Sorry, requested compression method is not configured. tiff_min.js (línea 103) uncaught exception: [object Object] – Dehost Jul 27 '15 at 21:28
Well, it seems like the files you want to use are not supported by libtiff, which is what the first link uses. Did you try the other two links? – cviejo Jul 28 '15 at 08:55
They did not work when a tiff image with good resolution does not work, that of google (second link) do not use it because I see it is for java and itilizarlo with gwt so where is there donot javascript ...... – Dehost Jul 28 '15 at 14:42
The tiffus library has client side pure javascript implementation. And even though they don't suit your needs...my answer is still correct, these are the options you have right now for working with tiffs on the web. – cviejo Aug 10 '15 at 12:48
Where is this client side implementation? Not in the repo even though the last commit was over 5 years ago? Why has nobody updated it since then even with a binary? If this library is even worth mentioning why is there no binary available anywhere? By binary I mean js file of course. Google search for "tiffus.js" yields no results. – marknuzz May 11 '16 at 23:30
Since google code has shut down, not sure if there was ever available binaries for download. In any case, the user claims to have a js version with basic functionality, you should probably [ask him directly](https://www.google.de/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=Sug%C3%A1r+Kriszti%C3%A1n+phrox). – cviejo May 12 '16 at 16:53

Kanish Mathew · Answer 2 · 2019-05-13T10:18:25.163

Displaying Tiff File in angular by displaying the image in the canvas.

Download the 'tiff.min.js' from https://github.com/seikichi/tiff.js and add the file to the 'src' folder.

Update the angular.json file with "scripts": [ "src/tiff.min.js"]

under "project"-> "architect" -> "build"->"options"->"scripts"

Inside the ts file of the component add the following code:

declare var Tiff: any;  # declared globally outside the class

# inside the component class
let xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', 'src_of_image_to_be_displayed');
xhr.onload = (e) => {
  let tiff = new Tiff({buffer: xhr.response});
  let canvas = tiff.toCanvas();
  document.body.append(canvas); # append to an div element 
}
xhr.send();

Display an image as .tiff or .tif

2 Answers2