vue使用gdal-async获取tif文件的缩略图

vue使用gdal-async获取tif文件的缩略图

npm i gdal-async

gdal-async

在Vue组件中使用gdal-async获取缩略图：

<template>
  <div>
    <img v-if="thumbnail" :src="thumbnail" alt="Thumbnail" />
  </div>
</template>
 
<script>
import {
    
     apply, gdal } from 'gdal-async';
 
export default {
    
    
  data() {
    
    
    return {
    
    
      thumbnail: null,
    };
  },
  async mounted() {
    
    
    await apply(); // 确保GDAL异步API可用
 
    try {
    
    
      const dataset = await gdal.openAsync('your_tiff_file.tif'); // 替换为你的TIFF文件路径
      const raster = dataset.bands.get(1); // 获取第一个波段
      const data = await raster.pixels.readAsync(0, 0, raster.sizeX, raster.sizeY); // 读取波段的像素数据
      const canvas = await raster.renderAsync(data, 256, 256, 1); // 渲染缩略图，尺寸为256x256
      // canvas.toDataURL() 获取到的是base64格式的src地址
      this.thumbnail = canvas.toDataURL(); // 转换为DataURL，用于在<img>标签中显示
    } catch (error) {
    
    
      console.error('Error while generating thumbnail:', error);
    }
  },
};
</script>