Angular6中引入tiff.js读取.tiff格式的图片

首先在前端页面显示.tiff格式的图片，时间问题（自己菜），不可能自己造轮子，找到第三方库

1、找第三方库

我们可以找到TiffGithub仓库,阅读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();
}

毫无疑问，凉凉，控制台报错，反正就是引进不成功。

fuck....

give color see see!是时候展示真正的技术了！

• 方式二（成功）：
  接下来，我们用最最原始的方式：）
  抛开框架，我们就用<script>方式。
  不过，一般在angular.json中将下载好的*.min.js放在script的属性中，像这样：

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

然后，在ts中使用：

declare var Tiff: any

重启服务，就可以愉快的使用上述demo了。

3、总结一下：

其实，Angular虽然使用的是typescript，在启动服务的时候或打包之后，都会编译成普通的js，所以一般js库能很容易引入到angular框架中使用。

引入方式：

• 1、npm install xxx + import * as ... from 'xxx',这种方式容易控制版本更替。一般推荐这种方式。

• 2、下载打好的包的.js或.min.js文件，在<script>标签中引入本地文件，或者放在angular.json的script中，然后ts中declare var xxx:any。

• 3、远程（如cdn）引入，然后ts中declare var xxx:any