vue3页面显示tiff图片

浏览器网页一般不直接支持tiff图片的显示，需要用到tiff.js这个库，首先安装tiff.js，使用命令 npm install tiff.js安装。

首先，引入相关库

import axios from 'axios';
import { ref } from 'vue';
import {TIFF } from 'tiff.js'

在vue中定义能显示图片的容器，与Vue的imgDB变量绑定，如下代码：

<template><img class="db1" :src="imgDB" alt="000" />
</template>

定义变量，其中变量imgDB与图片显示的<img>绑定一块，变量imgUrl存放了tif图片的访问地址。代码如下：

const imgDB= ref('');
const imgUrl='http://192.168.66.1/images/10.tif';

需要注意的是imgUrl是经过Ngnix代理后的地址，Vue请求Ngnix要面临一个跨域的问题，这就需要设置Ngnix的ngnix.conf配置文件，如下：

#图片代理路径
location /images/ {alias  C:/Users/wchw/Desktop/share/;autoindex on;# 添加 CORS 头add_header 'Access-Control-Allow-Origin' '*' always;add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type' always;add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;# 处理 OPTIONS 请求#if ($request_method = OPTIONS) {#    add_header 'Access-Control-Allow-Origin' '*' always;#    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;#    add_header 'Access-Control-Allow-Headers' 'DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type' always;#    return 204;#}
}

下面是转换tiff图片的函数，如下：

function setImg(imgUrl) {window.Tiff.initialize({ TOTAL_MEMORY: 1024 * 1024 * 1024 });axios.get(imgUrl, { responseType: 'blob' }).then(response => {response.data.arrayBuffer().then((arrayBuffer) => {const tiff = new window.Tiff({buffer: arrayBuffer,});imgDB.value = tiff.toDataURL()})}).catch(error => {console.error('Error fetching data:', error);});
}

如果图片过大，比如几百兆，现实就有困难，可以对图片进行一定的压缩，代码如下：

function setImg(imgUrl) {window.Tiff.initialize({ TOTAL_MEMORY: 1024 * 1024 * 1024 });axios.get(imgUrl, { responseType: 'blob' }).then(response => {response.data.arrayBuffer().then((arrayBuffer) => {const tiff = new window.Tiff({buffer: arrayBuffer,});// 创建一个新的 Canvas 元素用于生成缩略图let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");// 获取 TIFF 图像的宽度和高度let width = tiff.width();let height = tiff.height();// 设定缩略图的尺寸，比如设置为原图的 1/30 大小let thumbnailWidth = width / 30;let thumbnailHeight = height / 30;// 调整 Canvas 的大小为缩略图大小canvas.width = thumbnailWidth;canvas.height = thumbnailHeight;console.log("--------->width:"+width+", height:"+height);// 绘制缩小后的图像到 Canvas 中ctx.drawImage(tiff.toCanvas(), 0, 0, thumbnailWidth, thumbnailHeight);imgDB.value = canvas.toDataURL(); // 转换为 Base64 的缩略图// imgDB.value = tiff.toDataURL()})}).catch(error => {console.error('Error fetching data:', error);});
}

最后完整的代码如下：

<script setup>import axios from 'axios';import { ref } from 'vue';import {TIFF } from 'tiff.js'const imgDB= ref('');const imgUrl='http://192.168.66.1/images/10.tif';setImg(imgUrl);function setImg(imgUrl) {window.Tiff.initialize({ TOTAL_MEMORY: 1024 * 1024 * 1024 });axios.get(imgUrl, { responseType: 'blob' }).then(response => {response.data.arrayBuffer().then((arrayBuffer) => {const tiff = new window.Tiff({buffer: arrayBuffer,});// 创建一个新的 Canvas 元素用于生成缩略图let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");// 获取 TIFF 图像的宽度和高度let width = tiff.width();let height = tiff.height();// 设定缩略图的尺寸，比如设置为原图的 1/30 大小let thumbnailWidth = width / 30;let thumbnailHeight = height / 30;// 调整 Canvas 的大小为缩略图大小canvas.width = thumbnailWidth;canvas.height = thumbnailHeight;console.log("--------->width:"+width+", height:"+height);// 绘制缩小后的图像到 Canvas 中ctx.drawImage(tiff.toCanvas(), 0, 0, thumbnailWidth, thumbnailHeight);imgDB.value = canvas.toDataURL(); // 转换为 Base64 的缩略图// imgDB.value = tiff.toDataURL()})}).catch(error => {console.error('Error fetching data:', error);});}
</script><template><img class="db1" :src="imgDB" alt="000" />
</template>