6

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();
0

2 Answers 2

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

6
  • 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
    Commented Jul 27, 2015 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
    Commented Jul 28, 2015 at 8: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
    Commented Jul 28, 2015 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
    Commented Aug 10, 2015 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
    Commented May 11, 2016 at 23:30
1

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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.