企业信息平台系统_java开发简历_东莞网站推广公司黄页_十大广告公司排名

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>