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

汪同学丶

已于 2022-04-08 19:37:24 修改

阅读量8k

点赞数 5

分类专栏： VUE+工具文章标签： VUE+TIFFJS

于 2022-03-26 10:29:28 首次发布

本文链接：https://blog.csdn.net/weixin_44402694/article/details/123751362

版权

VUE+工具专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何利用Vue结合tiff.js实现在前端快速加载并预览TIFF格式图片的方法。通过npm安装tiff.js依赖后，借助fetch API获取图片数据，并转换为base64编码形式以实现图片的预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

需求：通过其他工具前置切出来，并放在服务器目录下的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>