Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display an image as .tiff or .tif

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();
like image 393
Dehost Avatar asked Jul 27 '15 15:07

Dehost


2 Answers

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

like image 110
cviejo Avatar answered Oct 06 '22 19:10

cviejo


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();
like image 31
Kanish Mathew Avatar answered Oct 06 '22 17:10

Kanish Mathew