处理tif或者tiff文件需要用到tif.min.js文件,附件已附上:

下面是核心js代码

var loadImage = function (filename) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', filename); //filename为tif文件地址
        xhr.responseType = 'arraybuffer';
        xhr.onload = function (e) {
            var buffer = xhr.response;
            var tiff = new Tiff({buffer: buffer});

            //tiff文件中有多张图片
            for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
                tiff.setDirectory(i);
                const canvas = tiff.toCanvas();
                if (canvas) {
                    canvasList.push(canvas);
                }
            }
            maxPage = canvasList.length;
            //alert(canvasList.length)
            //alert(maxPage)
            console.log('---------')
            console.log(canvasList)
            console.log(cunrrentPage - 1)
            let image = canvasList[cunrrentPage - 1];
            console.log(image);
            pushImg(image)
        };
        xhr.send();
    };
    loadImage('${imgUrl}'); //这里是我本人获取tif文件url并调用一次当前函数
})

定义加载某一页tif文件的函数

function pushImg(image) {
    $('.image>canvas').replaceWith(image)
}

然后在点击上一页或者下一页的地方调用上面加载tif文件的函数即可,下面是效果图:

点击下一页