前后端交互过程中—各类文件/图片的上传、下载、显示转换

图片
- 补充：
- - new Blob()
  - URL.createObjectURL()
  - 替代方案：FileReader.readAsDataURL()
  - 对比：
- tiff文件
- - TIFF库
  - TIFF转换
  - - 通过url转换tiff文件为png
    - 通过文件选择的方式转换tiff文件为png
- 下载
- 普通图片文件png,jpg,jpeg,gif

图片

补充：

new Blob()

const blob = new Blob(blobParts, options);

URL.createObjectURL()

URL.createObjectURL() 是 Web API 中的一个方法，它可以将一个 Blob ——（二进制数据对象）、File ——用户文件（继承自 Blob） 或 MediaSource——（流媒体场景）对象转换为一个唯一的 URL。

这个 URL 的生命周期与创建它的文档绑定，并且通常用于在浏览器中临时引用一个本地文件或二进制数据。

基本用法：

const objectURL = URL.createObjectURL(blob);
blob：一个 Blob、File 或 MediaSource 对象。
返回值：一个字符串，表示一个指向该对象的临时 URL。（格式为 blob:origin/unique-id）

内存管理 ：生成的 URL 会一直存在于内存中，直到文档被卸载（页面关闭）或手动撤销（URL.revokeObjectURL(objectURL)）。

URL 的生命周期：这个 URL 只在当前文档（document）中有效。如果导航到其他页面，这个 URL 就会失效。

安全性：生成的 URL 是 blob: 协议，其内容只能由创建它的页面访问，具有一定的安全性。

应用场景：

预览用户选择(上传时)的图片：
当用户通过 < input type=“file” > 选择图片后，可以用 createObjectURL 生成一个 URL 并赋给 < img > 的 src，从而在不将图片上传到服务器的情况下预览图片。

<input type="file" id="upload" accept="image/*">
<img id="preview" src="#" alt="预览">

		const upload = document.getElementById('upload');
		const preview = document.getElementById('preview');
		
		  upload.addEventListener('change', function(e) {
		    const file = e.target.files[0];
		    if (file) {
		      // 为选中的文件创建临时URL
		      const objectURL = URL.createObjectURL(file);
		      // 将img标签的src指向这个URL
		      preview.src = objectURL;
		      // 在图片加载后（或者合适的时机）撤销URL，这里我们等待图片加载完成
		      preview.onload = function() {
		        URL.revokeObjectURL(objectURL);
		      };
		    }
		  });

处理（下载）二进制数据：
例如，下载由 JavaScript 生成的二进制数据（如 PDF、图片等），或在不使用服务器的情况下在页面中显示这些数据。

	// 创建blob对象
	// 1.
	const response = await fetch('http://XXX');
	const blob = await response .blob();
	// 2.value
	const value= "Hello, world!";
	const blob2 = new Blob([value], {type: "text/plain"}); // image/png
	
	// 创建URL对象
	const url = URL.createObjectURL(blob);
	// 创建a标签......点击下载
	const a = document.createElement('a');
	a.href = url;
	a.download = 'example.txt';   // 设置下载文件名
	a.click();   // 触发下载
	setTimeout(() => URL.revokeObjectURL(url), 100);// 立即释放资源（不需要等待下载）

处理音视频流：（播放用户上传的视频）
在 WebRTC 或媒体处理中，用于创建指向媒体流的 URL。

	<input type="file" accept="video/*" id="video-upload">
	<video controls id="player"></video>
		
	<script>
	  document.getElementById('video-upload').addEventListener('change', (e) => {
	    const file = e.target.files[0];
	    if (file) {
	      const video = document.getElementById('player');
	      video.src = URL.createObjectURL(file);
	      video.onload = () => URL.revokeObjectURL(video.src); // 清理
	    }
	  });
	</script>

替代方案：FileReader.readAsDataURL()

将文件转为 Base64 字符串（格式 data:[mime];base64,…），但不适合大文件（内存占用更高）。

有时候，我们也可以用 FileReader 来读取文件内容，例如：

const reader = new FileReader();
reader.onload = function(e) {
  preview.src = e.target.result;
};
reader.readAsDataURL(file);

readAsDataURL 会生成一个 Data URL（以 data: 开头的字符串），它包含了文件的全部内容（base64编码）。
这种方式不需要手动撤销URL，但文件较大时可能会占用更多内存。

对比：

在这里插入图片描述

tiff文件

说明：
由于tiff格式在浏览器中并不常见，且浏览器默认不支持直接显示tiff图片。
tiff文件在前端中不可以直接通过image标签显示，
因此我们需要借助第三方库来将tiff文件转换成png。

TIFF库

utif：一个轻量级的TIFF解析库
tiff.js：一个将TIFF图像转换为可显示格式的库

utif库轻量且简单，以下以utif库使用为例：

安装：

npm install utif

npm install tiff.js

使用：

import * as UTIF from 'utif';

import { Tiff } from 'tiff.js';

注意：由于utif库处理的是TIFF文件的二进制数据，我们需要使用FileReader来读取文件。

注意事项：

大文件处理：
大尺寸 TIFF 文件可能导致内存问题
考虑添加文件大小限制和加载提示

服务器端替代方案：

// 替代方案：使用服务器转换（如Node.js+Sharp）
async serverConversion(file) {
  const formData = new FormData();
  formData.append('tiff', file);
  
  const response = await fetch('/api/convert', {
    method: 'POST',
    body: formData
  });
  
  return URL.createObjectURL(await response.blob());
}

浏览器兼容性：
所有现代浏览器均支持
IE11 需要 polyfill（推荐使用现代浏览器）

安全性：
上传时验证文件头确保是真实TIFF文件：

const isValidTiff = buffer[0] === 0x49 && buffer[1] === 0x49;

此实现完全在客户端完成转换，无需服务器支持，适合中小型TIFF文件的转换需求。对于专业级应用（如医学影像），建议使用服务器端解决方案（如Python+pillow
或 Node.js+sharp）。

TIFF转换

通过url转换tiff文件为png

获取在线的TIFF文件(通常是一个URL)：使用 Fetch API 获取远程 TIFF 文件的 ArrayBuffer
解析TIFF：使用如tiff.js 库解析二进制数据，获取图像信息
将图像数据绘制到canvas上，Canvas转换：
创建临时 Canvas 元素
使用 toRGBA8() 方法获取像素数据
通过 putImageData 绘制到 Canvas
转换为PNG，使用canvas的toDataURL方法将其转换为PNG格式的数据URL：
使用 canvas.toDataURL(‘image/png’) 获取 PNG 数据 URL
显示和下载：
通过 img 标签展示
创建下载链接实现PNG下载


// 引入依赖
import * as UTIF from "utif";
// tiff文件URL转换_方法封装
const tiffUrlToPng = async (fileUrl) => {
  if (!fileUrl) {
    console.log("请输入TIFF文件URL");
    return;
  }
  // 自定义初始化工作
  let result = "";
  // this.isLoading = true;
  // this.error = null;
  // this.pngImage = null;

  // 使用 Fetch API 获取远程 TIFF 文件的 ArrayBuffer
  await fetch(fileUrl)
    .then((response) => {
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.arrayBuffer();
    })
    .then((data) => {
      // 解析tiff数据
      const buffer = new Uint8Array(data);
      const ifds = UTIF.decode(buffer);
      // 获取第一帧（支持多帧TIFF）
      const firstPage = ifds[0];
      UTIF.decodeImage(buffer, ifds[0]);
      const rgba = UTIF.toRGBA8(firstPage);

      // 创建Canvas
      const canvas = document.createElement("canvas");
      canvas.width = firstPage.width;
      canvas.height = firstPage.height;
      const ctx = canvas.getContext("2d");

      // 将图像数据放入Canvas
      const imageData = new ImageData(
        new Uint8ClampedArray(rgba),
        canvas.width,
        canvas.height
      );
      ctx.putImageData(imageData, 0, 0);

      // 转换为PNG Data URL
      // resolve(canvas.toDataURL("image/png"));
      result = canvas.toDataURL("image/png");
    })
    .catch((error) => {
      console.error("Error:", error); // 处理错误
    });
  return result; //返回为promise对象。使用.then()方法获取结果。
};

utff.js使用（通过URL获取tiff文件转换）

<template>
  <div>
    <input type="text" v-model="tiffUrl" placeholder="输入TIFF文件URL">
    <button @click="convertToPng" :disabled="isLoading">转换为PNG</button>
    
    <div v-if="isLoading">转换中...</div>
    <img v-if="pngImage" :src="pngImage" alt="转换后的PNG" style="max-width: 100%">
    <div v-if="error" class="error">{{ error }}</div>
    
    <button v-if="pngImage" @click="downloadPng">下载PNG</button>
  </div>
</template>

<script>
import { Tiff } from 'tiff.js';

export default {
  data() {
    return {
      tiffUrl: '',      // 存储输入的TIFF URL
      pngImage: null,   // 转换后的PNG数据URL
      isLoading: false, // 加载状态
      error: null       // 错误信息
    };
  },
  methods: {
    async convertToPng() {
      if (!this.tiffUrl) {
        this.error = '请输入TIFF文件URL';
        return;
      }

      this.isLoading = true;
      this.error = null;
      this.pngImage = null;

      try {
        // 1. 获取TIFF文件数据
        const response = await fetch(this.tiffUrl);
        if (!response.ok) throw new Error(`文件加载失败: ${response.status}`);
        
        const buffer = await response.arrayBuffer();

        // 2. 解析TIFF
        const tiff = new Tiff({ buffer });
        const width = tiff.width();
        const height = tiff.height();

        // 3. 使用Canvas转换
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');

        // 获取TIFF像素数据并绘制到Canvas
        const imageData = ctx.createImageData(width, height);
        imageData.data.set(tiff.toRGBA8()); // 转换为RGBA格式
        ctx.putImageData(imageData, 0, 0);

        // 4. 转换为PNG
        this.pngImage = canvas.toDataURL('image/png');

      } catch (err) {
        console.error('转换失败:', err);
        this.error = `转换失败: ${err.message || '未知错误'}`;
      } finally {
        this.isLoading = false;
      }
    },

    // 下载转换后的PNG
    downloadPng() {
      if (!this.pngImage) return;
      
      const link = document.createElement('a');
      link.href = this.pngImage;
      link.download = 'converted_image.png';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>

<style>
.error {
  color: red;
  margin-top: 10px;
}
</style>

通过文件选择的方式转换tiff文件为png

实现说明：

文件选择：
- 使用接受用户上传的 TIFF 文件
- 设置 accept=“.tif,.tiff” 限制文件类型
TIFF 转换核心流程：
- 使用 FileReader 读取文件为 ArrayBuffer；
- 通过 UTIF.decode() 解析 TIFF 文件结构；
- 使用 UTIF.toRGBA8() 将 TIFF 转换为 RGBA 格式；
- 使用 Canvas 将图像数据渲染为 PNG
多帧支持：
- ifds 数组包含 TIFF 的所有帧；
- ifds[0] 获取第一帧（可根据需要循环处理多帧）
下载功能：
- 将 Canvas 生成的 Data URL 转换为可下载链接；
- 通过动态创建 a 标签触发下载

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".tif,.tiff">
    <div v-if="previewUrl">
      <img :src="previewUrl" alt="Converted PNG" style="max-width: 100%">
      <button @click="downloadPNG">下载PNG</button>
    </div>
  </div>
</template>

<script>
import * as UTIF from 'utif';

export default {
  data() {
    return {
      previewUrl: null,
      convertedImage: null
    };
  },
  methods: {
    async handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      try {
        const pngDataUrl = await this.convertTiffToPng(file);
        this.previewUrl = pngDataUrl;
      } catch (error) {
        console.error('转换失败:', error);
        alert('文件转换失败，请确保是有效的TIFF文件');
      }
    },

    async convertTiffToPng(tiffFile) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
          try {
            // 解析TIFF数据
            const buffer = new Uint8Array(e.target.result);
            const ifds = UTIF.decode(buffer);
            UTIF.decodeImages(buffer, ifds);
            
            // 获取第一帧（支持多帧TIFF）
            const firstPage = ifds[0];
            const rgba = UTIF.toRGBA8(firstPage);
            
            // 创建Canvas
            const canvas = document.createElement('canvas');
            canvas.width = firstPage.width;
            canvas.height = firstPage.height;
            const ctx = canvas.getContext('2d');
            
            // 将图像数据放入Canvas
            const imageData = new ImageData(
              new Uint8ClampedArray(rgba),
              canvas.width,
              canvas.height
            );
            ctx.putImageData(imageData, 0, 0);
            
            // 转换为PNG Data URL
            resolve(canvas.toDataURL('image/png'));
          } catch (err) {
            reject(err);
          }
        };
        reader.onerror = reject;
        reader.readAsArrayBuffer(tiffFile);
      });
    },

    downloadPNG() {
      if (!this.previewUrl) return;
      
      const link = document.createElement('a');
      link.href = this.previewUrl;
      link.download = 'converted_image.png';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>