v-viewer+tiff.js 展示tif文件

v-viewer+tiff.js 展示tif文件

做的一个项目需求要求展示tif文件，本人也是第一次做，所以经过百度查阅资料，总算搞出来了，再次记录一下！有需要改进的地方，还请各位大佬指出…

1.安装tiff依赖

// 引入依赖
npm install tiff.js

2.安装viewer依赖

npm install v-viewer --save

3.在main.js中引入viewer

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)

4.在组件中引入tiff.js

import Tiff from 'tiff.js'

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

        // tiff文件中有多张图片
        var canvasList = []
        var cunrrentPage = ''
        for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
          tiff.setDirectory(i)
          var imgs= tiff.toDataURL() // 转化成base64

          if (imgs) {
            canvasList.push(imgs)
          }
        }
      
      }
      xhr.send()
    },

6.展示

 <viewer id="printimg" :images="canvasList">
      <img
        v-for="item in canvasList"
        :src="item"
        :key="item"
        height="100"
        title="请点击查看"
      >
    </viewer>