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>