图片

上传下载常用函数：

new Blob()

Blob常用于处理二进制数据，比如读取文件内容或创建文件下载链接。

const blob = new Blob(blobParts, options);

blobParts：（必传）

必须是一个​​数组​​，其中包含以下任意组合：

options：（可选）

包含以下可选属性的对象：

blob的常见的MIME类型：

类型	子类型	典型文件扩展名	用途示例
text	plain	.txt	纯文本文件
	html	.html, .htm	HTML文档
	css	.css	层叠样式表
	csv	.csv	逗号分隔值文件
	javascript	.js	JavaScript文件
image	jpeg	.jpeg	JPEG图像
	png	.png	PNG图像
	gif	.gif	GIF图像
	svg+xml	.svg	SVG矢量图形
	webp	.webp	WebP图像
audio	mpeg	.mp3	MP3音频
	ogg	.ogg	OGG音频
	wav	.wav	WAV音频
	webm	.webm	WebM音频
video	mp4	.mp4	MP4视频
	ogg	.ogv	OGG视频
	webm	.webm	WebM视频
application	octet-stream	任意	任意二进制数据（默认）
	json	.json	JSON数据
	xml	.xml	XML数据
	pdf	.pdf	PDF文档
	zip	.zip	ZIP压缩文件
	vnd.ms-excel	.xls	Excel 97-2003 工作簿
	vnd.openxmlformats-officedocument.spreadsheetml.sheet	.xlsx	Excel 工作簿（2007+）
	msword	.doc	Word 97-2003 文档
	vnd.openxmlformats-officedocument.wordprocessingml.document	.docx	Word 文档（2007+）

示例：

// 创建文本Blob
const textBlob = new Blob(["Hello, world!"], {type: "text/plain"});// 创建JSON Blob
const data = {name: "Alice", age: 30};
const jsonBlob = new Blob([JSON.stringify(data)], {type: "application/json"});// 示例：默认类型（二进制流）
const defaultBlob = new Blob([anyData]); // 默认类型为 "application/octet-stream"// 创建图像Blob（伪代码）
const canvas = document.createElement('canvas');
// ... 在canvas上绘制 ...
canvas.toBlob((blob) => {// blob已准备好使用
}, "image/png");// 组合字符串、ArrayBuffer和现有Blob
const header = "FILE HEADER\n";
const binaryData = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f]); // "Hello"
const existingBlob = new Blob([" World!"], {type: "text/plain"});const combinedBlob = new Blob([header, binaryData, existingBlob], {type: "text/plain"}
);

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) {// 为选中的文件创建临时URLconst objectURL = URL.createObjectURL(file);// 将img标签的src指向这个URLpreview.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.valueconst 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，但文件较大时可能会占用更多内存。

FileReader 提供了几种方法来读取文件，

每种方法适用于不同的文件类型或读取方式：

readAsText(file, [encoding]) ：
以文本形式读取文件内容。
第二个参数是可选的，指定文本编码（如 UTF-8）。
readAsDataURL(file)：
将文件读取为 Data URL，通常用于将图像文件嵌入到网页中。
readAsArrayBuffer(file)：
将文件读取为 ArrayBuffer，适合处理二进制数据，如音频、视频或图像。
readAsBinaryString(file)（已废弃）：
将文件读取为二进制字符串。不推荐使用，建议使用 ArrayBuffer 替代。

对比：

获取tiff文件 转 png

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

TIFF库

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

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

• 安装：

npm install utifnpm install tiff.js

• 使用：

import * as UTIF from 'utif';import { Tiff } from 'tiff.js';

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

• 注意事项：

1. 大文件处理​​：
   大尺寸 TIFF 文件可能导致内存问题
   考虑添加文件大小限制和加载提示
2. 服务器端替代方案​​：

   // 替代方案：使用服务器转换（如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());
   }
   

3. 浏览器兼容性​​：
   所有现代浏览器均支持
   IE11 需要 polyfill（推荐使用现代浏览器）
4. 安全性​​：
   上传时验证文件头确保是真实TIFF文件：

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

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

TIFF转换

通过url转换tiff文件为png

1. 获取在线的TIFF文件(通常是一个URL)​​：使用 Fetch API 获取远程 TIFF 文件的 ArrayBuffer
2. 解析TIFF​​：使用 如tiff.js 库解析二进制数据，获取图像信息
3. 将图像数据绘制到canvas上，Canvas转换​​：
   创建临时 Canvas 元素
   使用 toRGBA8() 方法获取像素数据
   通过 putImageData 绘制到 Canvas
4. 转换为PNG​​，使用canvas的toDataURL方法将其转换为PNG格式的数据URL：
   使用 canvas.toDataURL(‘image/png’) 获取 PNG 数据 URL
5. ​​显示和下载​​：
   通过 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 文件的 ArrayBufferawait fetch(fileUrl).then((response) => {if (!response.ok) {throw new Error("Network response was not ok");}return response.arrayBuffer();}).then((buffer) => {// 解析tiff数据const uint8Array = new Uint8Array(buffer);const ifds = UTIF.decode(uint8Array);// 获取第一帧（支持多帧TIFF）const firstPage = ifds[0];UTIF.decodeImage(uint8Array, ifds[0]);const rgba = UTIF.toRGBA8(firstPage);// 创建Canvasconst canvas = document.createElement("canvas");canvas.width = firstPage.width;canvas.height = firstPage.height;const ctx = canvas.getContext("2d");// 将图像数据放入Canvasconst 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 URLpngImage: null,   // 转换后的PNG数据URLisLoading: 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. 解析TIFFconst 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像素数据并绘制到Canvasconst imageData = ctx.createImageData(width, height);imageData.data.set(tiff.toRGBA8()); // 转换为RGBA格式ctx.putImageData(imageData, 0, 0);// 4. 转换为PNGthis.pngImage = canvas.toDataURL('image/png');} catch (err) {console.error('转换失败:', err);this.error = `转换失败: ${err.message || '未知错误'}`;} finally {this.isLoading = false;}},// 下载转换后的PNGdownloadPng() {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

实现说明：
​​

1. 文件选择​​：
   • 使用 接受用户上传的 TIFF 文件
   • 设置 accept=“.tif,.tiff” 限制文件类型
2. ​​TIFF 转换核心流程​​：
   • 使用 FileReader 读取文件为 ArrayBuffer；
   • 通过 UTIF.decode() 解析 TIFF 文件结构；
   • 使用 UTIF.toRGBA8() 将 TIFF 转换为 RGBA 格式；
   • 使用 Canvas 将图像数据渲染为 PNG
3. 多帧支持​​：
   • ifds 数组包含 TIFF 的所有帧；
   • ifds[0] 获取第一帧（可根据需要循环处理多帧）
4. ​​下载功能​​：
   • 将 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);// 创建Canvasconst canvas = document.createElement('canvas');canvas.width = firstPage.width;canvas.height = firstPage.height;const ctx = canvas.getContext('2d');// 将图像数据放入Canvasconst imageData = new ImageData(new Uint8ClampedArray(rgba),canvas.width,canvas.height);ctx.putImageData(imageData, 0, 0);// 转换为PNG Data URLresolve(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>

下载（导出）

function downloadFile(blob, fileName) {const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = fileName;document.body.appendChild(a);a.click();// 清理setTimeout(() => {document.body.removeChild(a);URL.revokeObjectURL(url);}, 100);
}

普通图片文件png,jpg,jpeg,gif

上传下载如上代码