首先在前端頁(yè)面顯示
.tiff格式的圖片造锅，時(shí)間問(wèn)題（自己菜）阳懂，不可能自己造輪子舟奠，找到第三方庫(kù)
1、找第三方庫(kù)
我們可以找到TiffGithub倉(cāng)庫(kù),閱讀READ.MD文件鞍恢。
這里有如下使用案例：
// Usage
// [](https://github.com/seikichi/tiff.js#browser)Browser
// Download tiff.min.js and load the script by yourself:
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', "url/of/a/tiff/image/file.tiff");
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response});
var canvas = tiff.toCanvas();
document.body.append(canvas);
};
xhr.send();
2傻粘、嘗試使用上述demo
首先嘗試在Angular6中引入tiff.js文件每窖。
- 方式一（涼涼）：
嘗試按照通常的方式：
npm install tiff
成功下載帮掉，然后，在ts文件中：
import * as Tiff from 'tiff'
....
....
ngOninit(){
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', "url/of/a/tiff/image/file.tiff");
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response});
var canvas = tiff.toCanvas();
document.body.append(canvas);
};
xhr.send();
}
毫無(wú)疑問(wèn)窒典，涼涼蟆炊，控制臺(tái)報(bào)錯(cuò)，反正就是引進(jìn)不成功瀑志。
fuck....
give color see see!是時(shí)候展示真正的技術(shù)了涩搓！
- 方式二（成功）：
接下來(lái)，我們用最最原始的方式：）
拋開(kāi)框架劈猪，我們就用<script>方式昧甘。
不過(guò)，一般在angular.json中將下載好的*.min.js放在script的屬性中战得，像這樣：
"scripts": [
"src/assets/js/tiff.min.js"
]
然后充边，在ts中使用：
declare var Tiff: any
重啟服務(wù)，就可以愉快的使用上述demo了常侦。
3浇冰、總結(jié)一下：
其實(shí)，Angular雖然使用的是typescript聋亡，在啟動(dòng)服務(wù)的時(shí)候或打包之后肘习，都會(huì)編譯成普通的js，所以一般js庫(kù)能很容易引入到angular框架中使用坡倔。
引入方式：
1漂佩、
npm install xxx+import * as ... from 'xxx',這種方式容易控制版本更替脖含。一般推薦這種方式。2仅仆、下載打好的包的
.js或.min.js文件器赞，在<script>標(biāo)簽中引入本地文件，或者放在angular.json的script中墓拜，然后ts中declare var xxx:any港柜。3、遠(yuǎn)程（如cdn）引入咳榜，然后
ts中declare var xxx:any
