How to handle tiff images so that can displayed in chrome with angular?

Question

In angular app I am rendering tiff images which i bind based on the url I get from api.eg: abc.com\temp\image1.tif. I need to render this images only thing they are not always tiff sometimes it may png/gif etc. Sample example can be helpful Thanks

Answer 1

you can add tiff.min.js

1. Download https://raw.githubusercontent.com/seikichi/tiff.js/master/tiff.min.js save on yourproject\src\assets\js\tiff.min.js

2. add on file angular.json > projects > yourproject > architect > build > options

   "scripts": ["src/assets/js/tiff.min.js"]

3. don´t forget declare Tiff variable.

    import { Component, OnInit } from '@angular/core';
    
    declare var Tiff: any;
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent implements OnInit{
      title = 'angular-image-viewer';
    
      ngOnInit(): void {
        this.loadimage();
      }
    
     loadimage(){
    
      const xhr = new XMLHttpRequest();
      xhr.responseType = 'arraybuffer';
      xhr.open('GET', '../assets/images/1.TIF');
      xhr.onload = (e) => {
      const tiff = new Tiff({buffer: xhr.response});
      const canvas = tiff.toCanvas();
      document.body.append(canvas); // beautify!
    };
      xhr.send();
     }
    
      }

tested on

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.6
@angular-devkit/build-angular   0.1001.6
@angular-devkit/core            10.1.6
@angular-devkit/schematics      10.1.6
@angular/cli                    10.1.6
@schematics/angular             10.1.6
@schematics/update              0.1001.6
rxjs                            6.6.3
typescript                      4.0.3