【VUE - 工具 - TIFF】01、前端vue+tiffjs预览显示在线tiff图片

前言

需求：通过其他工具前置切出来，并放在服务器目录下的tiff图片，项目需要在前端预览显示。
实现方式：基于vue+tiffjs实现

实现

1、实现效果

npm+VUE实现

1、安装依赖

npm i tiff.js -S
|
yarn add tiff.js -S

2、代码实现

<template>
  <div class="home-container-wrap">
    <p v-if="!dataUrl" style="color: red;">正在加载中</p>
    <img v-else :src="dataUrl" style="width: 400px; height: 400px;" alt="">
  </div>
</template>

<script>

export default {
  name: 'Index',
  data () {
    return {
      dataUrl: ''
    }
  },
  mounted () {
    this.getTiffDataUrlHandler()
  },
  methods: {
    // 获取tif图的dataUrl base64编码进行展示
    async getTiffDataUrlHandler () {
      const response = await fetch('http://winserver.geointech.cn:8021/1.tif')
      const buffer = await response.arrayBuffer()
      const Tiff = require('tiff.js')
      const tiff = new Tiff({ buffer })
      this.dataUrl = tiff.toDataURL()
    }
  }
}
</script>

script引入html实现，拷贝运行即可实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端加载显示TIFF图</title>
  <!-- 以下script tiffjs地址为私有服务器地址，会被定期清除，必须把tiffjs下载到自己本地引入使用 -->
  <script src="http://winserver.geointech.cn:8021/tiff.min.js"></script>
</head>
<body>
  <img style="width: 400px; height: 400px;" alt="">

  <script>
    window.onload = function () {
      getTiffDataUrlHandler()
    }
    async function getTiffDataUrlHandler () {
      const response = await fetch('http://winserver.geointech.cn:8021/1.tif')
      const buffer = await response.arrayBuffer()
      const tiff = new Tiff({ buffer })
      const img = document.querySelector('img')
      img.src = tiff.toDataURL()
    }
  </script>
</body>
</html>

【VUE - 工具 - TIFF】01、前端vue+tiffjs预览显示在线tiff图片

前言

实现

npm+VUE实现

script引入html实现，拷贝运行即可实现

悦读