使用 fetch 获取 webp 数据后，调用返回的 response 对象的 arraybuffer() 方法将其转换为二进制缓冲区。拿到 arraybuffer 后，通过 url.createobjecturl() 创建一个指向该数据的 blob url，即可直接赋值给 src 属性进行渲染。
如何从 Fetch 响应中提取二进制数据
在请求头中不设置特定的 Accept 类型限制，或者明确指定 image/webp，浏览器会根据服务器响应头的 Content-Type 自动处理 MIME 类型。核心步骤是调用 response.arrayBuffer()，该方法会等待整个响应体加载完毕并解析为底层的二进制数据，这是后续构建图片对象的基础。
const url = '/api/image';
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.arrayBuffer();
})
.then(buffer => {
const blob = new Blob([buffer], { type: 'image/webp' });
const objectUrl = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = objectUrl;
document.body.appendChild(img);
// 可选：释放内存
// URL.revokeObjectURL(objectUrl);
})
.catch(error => {
console.error('Fetch error:', error);
});
上述代码展示了完整的流程。首先检查响应状态，确保请求成功。接着将响应体转为 ArrayBuffer。随后利用这个缓冲区实例化一个 Blob 对象，并显式指定 MIME 类型为 image/webp。最后生成 Object URL 并绑定到 DOM 元素上。
如何处理流式或大文件 WebP 数据
当接口返回的 WebP 数据量较大时，一次性加载到内存可能引发性能问题。此时可以使用 ReadableStream 配合 Response.body 进行分块读取。虽然最终仍需组装成完整数据才能被浏览器解码为图片，但这种方式允许我们在传输过程中进行监控或预处理，避免阻塞主线程。
const url = '/api/large-image';
fetch(url)
.then(response => {
const reader = response.body.getReader();
const chunks = [];
function readChunk() {
return reader.read().then(({ done, value }) => {
if (done) {
const blob = new Blob(chunks, { type: 'image/webp' });
const objectUrl = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = objectUrl;
document.body.appendChild(img);
return;
}
chunks.push(value);
return readChunk();
});
}
return readChunk();
})
.catch(error => {
console.error('Stream error:', error);
});
在这个场景中，我们获取了 response.body 的 Reader 实例。通过递归调用 read() 方法，逐个获取数据块（Chunks）。每个块都是 Uint8Array 类型，我们将其推入数组。当 done 为 true 时，表示数据接收完毕，此时将所有块合并为 Blob 并创建图片。这种方法适用于需要实时反馈进度或对内存敏感的场景。
如果接口返回的是 Base64 编码的 WebP 字符串怎么办
有些老旧接口或特定配置下，WebP 数据可能以 Base64 字符串形式返回，而非原始二进制流。这种情况下，不能直接使用 arrayBuffer()，而需要先获取文本内容，再将其解码为二进制数据。可以通过 response.text() 获取字符串，然后使用 atob() 函数将其转换为二进制字符串，最后构建 ArrayBuffer。
const url = '/api/base64-webp';
fetch(url)
.then(response => response.text())
.then(base64String => {
// 去除 Data URI 前缀（如果存在）
const base64Data = base64String.replace(/^data:image\/webp;base64,/, '');
// 将 Base64 字符串转换为二进制字符串
const binaryString = window.atob(base64Data);
// 将二进制字符串转换为 Uint8Array
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i {
console.error('Base64 decode error:', error);
});
这种处理方式的关键在于字符编码的转换。atob() 是浏览器内置的全局函数，用于解码 Base64 编码的字符串。由于它返回的是二进制字符串（每个字符代表一个字节），我们需要遍历该字符串，将每个字符的 Unicode 码点提取出来，存入 Uint8Array。这样得到的数组与直接从 arrayBuffer() 获得的二进制数据在结构上是等价的，可以无缝接入后续的 Blob 创建流程。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
