前端实现tif/tiff文件浏览

背景

项目中要求前端展示tif/tiff文件

方法选择

• 尝试使用img标签直接引入tif/tiff文件，文件无法显示。查阅资料后修改为使用background，但文件同样无法展示
• 最终选择使用 tiff.js

实现方法

可以直接引入tiff.min.js文件，vue项目可以直接使用npm安装

$ npm install tiff.js

使用的方法也十分简单

const xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', 'static/test2.tif');
xhr.onload = () => {
    const tiff = new Tiff({buffer: xhr.response});
    const canvas = tiff.toCanvas();
    this.src = canvas.toDataURL();
};
xhr.send();

问题解决

1. tiff.js默认只能转换小于10M的文件，要想加载更大的文件，实例化Tiff对象前，加入

Tiff.initialize({TOTAL_MEMORY :50 * 1024 * 1024});

2. IE下报错 InvalidStateError 。responseType的设置在IE上不能在open之前设置，否则会异常InvalidStateError。修改代码为

xhr.open('GET', 'static/test2.tif');
xhr.responseType = 'arraybuffer';

3. 文件超过40M时IE浏览器偶尔会加载崩溃，暂未找到合适替代方案，建议浏览文件过大时通过后端进行文件格式转化或安装支持浏览tif/tiff文件的插件并使用object标签展示