js显示在线tif图片

最新推荐文章于 2025-02-22 20:34:58 发布

小眼哥

最新推荐文章于 2025-02-22 20:34:58 发布

阅读量402

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_36580022/article/details/128451427

前端专栏收录该内容

18 篇文章

订阅专栏

安装tiff插件

npm install tiff.js

vue

<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://39.105.42.174:9199/guangfu/tif/123.tif')
      const buffer = await response.arrayBuffer()
      const Tiff = require('tiff.js')
      const tiff = new Tiff({ buffer })
      this.dataUrl = tiff.toDataURL()
    }
  }
}
</script>

js

<!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://39.105.42.174:9199/guangfu/tif/123.tif')
      const buffer = await response.arrayBuffer()
      const tiff = new Tiff({ buffer })
      const img = document.querySelector('img')
      img.src = tiff.toDataURL()
    }
  </script>
</body>
</html>