前段时间公司有个需求，就是前端要加载大量的tif 和 tiff 格式的图片
瞬间觉得头大如牛，没有一点思路，于是一直问度娘，功夫不负苦心人，终于让我找到了一款比较好用的插件 tiff.js

// 引入依赖
npm install tiff.js

使用

<div class="img-box">
	<div ref="imgContainer" class="tifcontent zoomimg"
     	 @mousewheel="handleZooming"
     	 v-loading.lock="tifLoading"
   	     @mousedown="handleDown"
	></div>
</div>

// 联调接口  获取tif
async getTiffContent (item) {
      this.tifLoading = true
      let offsetHeight = document.getElementsByClassName('img-box')[0].offsetHeight
      let offsetWidth = document.getElementsByClassName('img-box')[0].offsetWidth
      await getTiff({
        attachBatchId: item.attachUrl,
        attachName: item.attachName
      }).then(res => {
      // 引入tiff.js
        var Tiff = require('tiff.js')
        var tiff = new Tiff({ buffer: res.data })
        var canvas = tiff.toCanvas() //绘制canvas
        //获取宽高
        var width = tiff.width()
        var height = tiff.height()
        console.log(width, height)
        if (canvas) {
          canvas.setAttribute('style', 'width: 100%;')
          // 设置宽高 等比例缩放图片
          var scale = 1
          if (width > offsetWidth || height > offsetHeight) {
            if (width > height) {
              scale = offsetWidth / width
            } else {
              scale = offsetHeight / height
            }
          }
          canvas.setAttribute(
            'style',
            'width:' +
              width * scale +
              'px; height: ' +
              height * scale +
              'px;max-width:calc( 100vh* scale - 246px* scale );max-height: calc( 100vh - 180px);'
          )
          canvas.setAttribute('id', item.attachUrl)
          canvas.setAttribute('ref', 'canvas')
        }
      this.tifLoading = false
    },

不过在IE浏览器中加载tif图片会很卡，会出现如图所示的情况，目前没有找到解决办法，如有大佬遇到且已解决，欢迎指教