Vue3 + Axios：轻松渲染后端返回的 TIFF 图像

前端

2023-11-05 12:02:13

如何使用 Vue3 + Axios + img 标签渲染后端返回的 TIFF 图像

摘要

本教程将指导您如何使用 Vue3、Axios 和 img 标签在前端渲染后端返回的 TIFF 图像。即使后端无法将 TIFF 转换为 PNG 等更常见格式，您也可以通过遵循以下步骤轻松显示这些图像。

先决条件

安装 Vue3 和 Axios
具有返回 TIFF 图像流的后端

步骤

使用 Axios 获取 TIFF 图像

import axios from 'axios';

const getImage = async () => {
  const response = await axios.get('/api/image.tiff', {
    responseType: 'arraybuffer',
  });
  return response.data;
};

使用 FileReader 将 TIFF 图像转换为 DataURL

const convertImage = (tiffData) => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      resolve(e.target.result);
    };
    reader.readAsDataURL(tiffData);
  });
};

将 DataURL 设置为 img 标签的 src

<template>
  <img :src="imageData" alt="TIFF Image">
</template>

<script>
export default {
  data() {
    return {
      imageData: null,
    };
  },
  created() {
    this.getImage();
  },
  methods: {
    async getImage() {
      const tiffData = await getImage();
      const imageData = await convertImage(tiffData);
      this.imageData = imageData;
    },
  },
};
</script>