JavaScript Fetch API 怎么处理接口返回的 TIFF 数据-js教程-PHP中文网

使用 fetch 请求接口时，将 responsetype 设置为 arraybuffer 或 blob 即可获取 tiff 数据。随后通过 filereader 读取为 data url 或使用 url.createobjecturl 生成对象 url，最后赋值给标签的 src 属性进行展示。

JavaScript Fetch API 怎么处理接口返回的 TIFF 数据

如何配置 fetch 以正确接收二进制流

在调用 fetch 时，必须显式指定 responseType: 'arraybuffer' 或 responseType: 'blob'，否则浏览器默认尝试解析为文本，导致二进制数据损坏。推荐使用 blob 类型，因为它可以直接被浏览器渲染引擎识别并转换为图像资源。

JavaScript Fetch API 怎么处理接口返回的 TIFF 数据

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 可以直接用于标签。

如何将 Blob 数据渲染到页面上

获取到 Blob 对象后，最直接的渲染方式是使用 URL.createObjectURL。这种方法性能最好，因为不需要将二进制数据编码为 Base64 字符串，避免了内存膨胀和 CPU 开销。生成的 URL 是临时的，当不再需要时，应调用 URL.revokeObjectURL 释放内存。

modern-javascript-patterns

掌握 ES6+ 特性，包括 async/await、解构、扩展运算符、箭头函数、Promise、模块、迭代器、生成器以及函数式编程模式，编写简洁高效的 Java

下载

JavaScript Fetch API 怎么处理接口返回的 TIFF 数据

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 像素数据，然后绘制到元素上。

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 绘制到画布上。这种方式兼容性最好，但性能相对较低，适合处理小尺寸或对兼容性要求极高的场景。