前端展示tif格式文件（缩略图展示）

背景

由于我司多半项目是Gis遥感类的项目，难免要和.tif/.tiff文件打交道，有些业务场景就需要对它们做展示或预览。

相关概念

什么是tif文件？

.tif文件是一种高质量的、无损压缩的位图图像格式，适用于需要高精度图像处理的场景，如出版印刷、摄影测量与遥感等。

所需依赖

• tiff.js(npm itiff.js)

  ---

  demo效果

  

  ---

  代码展示

  template

  用到了element-plus(^2.8.2)组件库

  名称

  描述

  类型

  默认值

  on-change

  文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

  Function

  -

  
  
      
         
         拖拽文件或 点击选择
      
      
         上传
      
      
              
  
  
  
      
          
              
          
      
  
  

  script

  Vue3 setup语法糖

  注意点：必须要引入“Tiff”，并且在使用时要在“Tiff”的前面加上“window.”(window对象是bom的核心)，否则也许会报“Tiff is not a constructor”的错误，如下面代码所示：

  import Tiff from "tiff.js";
  //缩略图url
  let src1 = ref("");
  // 上传文件
  // 文件上传列表
  let uploadFileList = ref([]);
  // 文件改变事件
  function handleChange(uploadFile, uploadFiles) {
    console.log(uploadFile.raw, "改变");
    uploadFileList.value.push(uploadFile.raw);
    console.log(uploadFileList.value);
    let fr = new FileReader();
    fr.readAsArrayBuffer(uploadFile.raw); //要取文件的raw属性
    fr.onload = function (e) {
      window.Tiff.initialize({ TOTAL_MEMORY: 1024 * 1024 * 1024 });
      let tiff = new window.Tiff({ buffer: e.target.result });
      //
      // 创建一个新的 Canvas 元素用于生成缩略图
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      // 获取 TIFF 图像的宽度和高度
      let width = tiff.width();
      let height = tiff.height();
      // 设定缩略图的尺寸，比如设置为原图的 1/20 大小
      let thumbnailWidth = width / 20;
      let thumbnailHeight = height / 20;
      // 调整 Canvas 的大小为缩略图大小
      canvas.width = thumbnailWidth;
      canvas.height = thumbnailHeight;
      // 绘制缩小后的图像到 Canvas 中
      ctx.drawImage(tiff.toCanvas(), 0, 0, thumbnailWidth, thumbnailHeight);
      // 将缩小后的图像转换为 Base64 URL
      src1.value = canvas.toDataURL(); // 转换为 Base64 的缩略图
    };
  }
  

  ---

  展示请求资源

  上文中展示的代码是，在上传tif文件的时候，展示选择的本地tif图像，如果是展示请求的网络资源，可以参考下面这段代码：

  template

  script

  如果访问的网络地址被同源策略禁止的话，你可能需要使用代理来处理跨域问题

  //script setup
  import Tiff from "tiff.js";
  let src2 = ref();
  var xhr = new XMLHttpRequest();
  xhr.responseType = "arraybuffer";
  //"tifurl → 后端返回的tif文件http地址 例如：http://192.168.8.126:80/img/cs.tif"
  xhr.open("GET", tifurl);
  xhr.onload = function (e) {
      window.Tiff.initialize({ TOTAL_MEMORY: 1024 * 1024 * 1024})
      var tiff = new window.Tiff({ buffer: xhr.response });
      // 创建一个新的 Canvas 元素用于生成缩略图
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      // 获取 TIFF 图像的宽度和高度
      let width = tiff.width();
      let height = tiff.height();
      // 设定缩略图的尺寸，比如设置为原图的 1/2 大小
      let thumbnailWidth = width / 2;
      let thumbnailHeight = height / 2;
      // 调整 Canvas 的大小为缩略图大小
      canvas.width = thumbnailWidth;
      canvas.height = thumbnailHeight;
      // 绘制缩小后的图像到 Canvas 中
      ctx.drawImage(tiff.toCanvas(), 0, 0, thumbnailWidth, thumbnailHeight);
      // 将缩小后的图像转换为 Base64 URL
      src2.value = canvas.toDataURL(); // 转换为 Base64 的缩略图
      // console.log("toDataURL:" + src2.value);
  };
  xhr.onerror = function (e) {
      console.log("xhr onerror: ↓");
      console.log(e);
  };
  xhr.send();
  

  ---

  其他

  # 处理超大文件的问题：

  我在测试的时候，tif文件的大小在250MB左右，运行是没有问题的，如果不进行缩略图处理的话，页面会有明显卡顿。

  也有尝试处理3GB左右的tiff文件，比如将“window.Tiff.initialize({ TOTAL_MEMORY: 1024 * 1024 * 1024 });”的值加大，或者在“fr.readAsArrayBuffer(uploadFile.raw);”这一步做截取，结果都失败了，如果大家有好的处理方法的话欢迎评论告诉我，不胜感激。

  # 处理32-bit的tif文件问题：

  tiff.js无法处理32位样本的图像，如下图所示：（24位测试是可以的）