使用 fetch 请求接口时，将 responsetype 设置为 arraybuffer 或 blob 即可获取 tiff 数据。随后通过 filereader 读取为 data url 或使用 url.createobjecturl 生成对象 url，最后赋值给 <img alt="JavaScript Fetch API 怎么处理接口返回的 TIFF 数据" > 标签的 src 属性进行展示。
如何配置 fetch 以正确接收二进制流
在调用 fetch 时，必须显式指定 responseType: 'arraybuffer' 或 responseType: 'blob'，否则浏览器默认尝试解析为文本，导致二进制数据损坏。推荐使用 blob 类型，因为它可以直接被浏览器渲染引擎识别并转换为图像资源。
const url = '/api/image.tiff';
fetch(url, {
method: 'GET',
headers: {
'Accept': 'image/tiff'
}
})
.then(response => response.blob())
.then(blob => {
const objectUrl = URL.createObjectURL(blob);
console.log('Image URL:', objectUrl);
// 后续步骤：将 objectUrl 赋给 img 标签
})
.catch(error => console.error('Fetch error:', error));
上述代码中，response.blob() 方法将响应体转换为 Blob 对象。这一步是关键，它保留了数据的原始二进制结构。如果后端返回的是 application/octet-stream 或其他非标准 MIME 类型，只要数据完整，blob 依然能正确封装。获取到 blob 后，URL.createObjectURL 会在内存中创建一个指向该 Blob 的唯一 URL，这个 URL 可以直接用于 <img alt="JavaScript Fetch API 怎么处理接口返回的 TIFF 数据" > 标签。
立即学习“Java免费学习笔记（深入）”；
掌握 ES6+ 特性，包括 async/await、解构、扩展运算符、箭头函数、Promise、模块、迭代器、生成器以及函数式编程模式，编写简洁高效的 Java
如何将 Blob 数据渲染到页面上
获取到 Blob 对象后，最直接的渲染方式是使用 URL.createObjectURL。这种方法性能最好，因为不需要将二进制数据编码为 Base64 字符串，避免了内存膨胀和 CPU 开销。生成的 URL 是临时的，当不再需要时，应调用 URL.revokeObjectURL 释放内存。
function displayTiffFromBlob(blob) {
const img = document.createElement('img');
const objectUrl = URL.createObjectURL(blob);
img.onload = () => {
console.log('Image loaded successfully');
URL.revokeObjectURL(objectUrl); // 释放内存
};
img.onerror = (err) => {
console.error('Failed to load image:', err);
URL.revokeObjectURL(objectUrl);
};
img.src = objectUrl;
document.body.appendChild(img);
}
// 假设 blob 已在上一步获取
// displayTiffFromBlob(myBlob);
在上面的代码中，img.onload 事件确保在图像完全加载后才释放 URL，防止因异步加载未完成而提前销毁资源。对于 TIFF 格式，现代浏览器（如 Chrome、Edge）原生支持渲染，但 Firefox 可能需要启用相关标志或使用第三方库。如果目标环境不支持原生 TIFF 渲染，需要将 Blob 转换为 Canvas 或使用 libtiff.js 等库进行解码。
当浏览器不支持原生 TIFF 渲染时如何处理
如果用户使用的浏览器（如旧版 Firefox）无法直接显示 TIFF 图像，或者需要处理复杂的 TIFF 压缩格式（如 LZW），则需要引入 JavaScript 库进行解码。常用的库包括 libtiff.js 或 tiff.js。这些库可以将 TIFF 的二进制数据解码为 RGBA 像素数据，然后绘制到 <canvas></canvas> 元素上。
import LibTiff from 'libtiff';
async function renderTiffWithLibTiff(arrayBuffer) {
const tiff = await LibTiff.create();
try {
await tiff.decode(arrayBuffer);
const canvas = document.createElement('canvas');
canvas.width = tiff.imageWidth;
canvas.height = tiff.imageHeight;
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(canvas.width, canvas.height);
imageData.data.set(tiff.raster);
ctx.putImageData(imageData, 0, 0);
document.body.appendChild(canvas);
} finally {
tiff.close();
}
}
这段代码展示了使用 libtiff.js 的标准流程。首先创建 LibTiff 实例，然后调用 decode 方法传入 ArrayBuffer。解码成功后，tiff.raster 包含了解码后的像素数据。接着创建 Canvas 并设置尺寸，将像素数据填充到 ImageData 中，最后通过 putImageData 绘制到画布上。这种方式兼容性最好，但性能相对较低，适合处理小尺寸或对兼容性要求极高的场景。
