如何处理tiff图像，以便可以显示在铬与角度

Question

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

Answer 1

您可以添加tiff.min.js

1. 下载https://raw.githubusercontent.com/seikichi/tiff.js/master/tiff.min.js保存yourproject\src\assets\js\tif.min.js

2. 加载项文件angular.json>项目>您的项目>架构师>构建>选项

   "；脚本"：["src/assets/js/tif.min.js"]

3. 不要忘记声明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

Answer 2

此代码有效。在HTML文件中使用此标记。

<script src="assets/js/tiff.min.js"></script>