如何处理 tiff 图像以便可以在 chrome 和 angular 中显示？

Question

在 angular 应用程序中，我正在渲染 tiff 图像，我根据从 api.eg 获得的 url 绑定这些图像：abc.com\temp\image1.tif。我只需要渲染这些图像，它们并不总是 tiff 有时它可能 png/gif 等。示例可能会有所帮助谢谢

Answer 1

你可以添加tiff.min.js

下载https://raw.githubusercontent.com/seikichi/tiff.js/master/tiff.min.js 节省 yourproject\src\assets\js\tiff.min.js
添加文件 angular.json > projects > yourproject > architect > build > options

"脚本": ["src/assets/js/tiff.min.js"]
别忘了声明 Tiff 变量。

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

测试于

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

如何处理 tiff 图像以便可以在 chrome 和 angular 中显示？

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

tiff

angular