本教程详细介绍了在javascript中如何使用`fetch` api正确处理从服务器返回的二进制数据，特别是当api返回如图片生成服务（如novelai）的zip文件时。文章解释了为何直接使用`response.text()`会导致数据损坏，并提供了通过`response.arraybuffer()`获取原始二进制数据，以及将其高效转换为base64编码字符串的实用方法和示例代码，确保数据完整性和可用性。
理解API二进制数据响应
在与Web API交互时，我们通常会遇到JSON或纯文本格式的响应。然而，对于某些特定服务，例如图像生成、文件下载或流媒体API，服务器可能会直接返回二进制数据。如果未能正确处理这些二进制响应，可能会导致数据损坏或无法使用。
例如，在使用NovelAI等图像生成API时，API通常会返回一个包含生成图像的ZIP文件。尝试使用fetch API的response.text()方法来处理这种二进制响应，会导致数据被误解析为UTF-8文本，从而破坏其原始二进制结构。结果是接收到一个看似乱码的字符串，即使将其保存为文件并更改扩展名，也无法正常解压或使用，因为其内部数据已损坏。
正确获取二进制数据：使用response.arrayBuffer()
为了正确获取API返回的原始二进制数据，fetch API提供了response.arrayBuffer()方法。这个方法会异步地将响应体读取为ArrayBuffer，这是一个通用的、固定长度的原始二进制数据缓冲区。
以下是如何在JavaScript中使用fetch API请求NovelAI图像生成服务并正确获取其二进制响应的示例：
立即学习“Java免费学习笔记（深入）”；
async function generateImageAndGetBinaryData(accessToken, query) { const model = "nai-diffusion-3"; // 示例模型 const apiUrl = "https://api.novelai.net/ai/generate-image"; try { const response = await fetch(apiUrl, { method: "POST", headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}`, 'Accept': "*/*" // 接受所有类型响应 }, body: JSON.stringify({ "input": `masterpiece, best quality, ${query}`, "model": model, "action": "generate", "parameters": { "width": 768, "height": 512, "scale": 11, "sampler": "k_dpmpp_2m", "steps": 28, "seed": Math.floor(Math.random() * 10000000000), // 随机种子 "n_samples": 1, "ucPreset": 0, "qualityToggle": true, "sm": false, "sm_dyn": false, "dynamic_thresholding": false, "controlnet_strength": 1, "legacy": false, "add_original_image": false, "negative_prompt": "lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry" } }) }); if (!response.ok) { const errorText = await response.text(); throw new Error(`API error: ${response.status} - ${errorText}`); } // 关键一步：使用 response.arrayBuffer() 获取原始二进制数据 const arrayBuffer = await response.arrayBuffer(); console.log("Received ArrayBuffer:", arrayBuffer); return arrayBuffer; } catch (error) { console.error("Error generating image:", error); throw error; }}// 示例调用 (假设accessToken和query已定义)// generateImageAndGetBinaryData(myAccessToken, "a beautiful landscape")// .then(buffer => {// // 在这里处理 arrayBuffer，例如转换为Base64或保存为文件// })// .catch(err => console.error(err));
将ArrayBuffer转换为Base64编码字符串
在许多场景下，例如将图像嵌入到HTML/CSS中（data: URI）、通过JSON传输二进制数据，或者在某些数据库中存储，将ArrayBuffer转换为Base64编码字符串会非常有用。Base64编码将二进制数据表示为ASCII字符串，使其可以在文本环境中安全传输。
以下是一个将ArrayBuffer转换为Base64字符串的实用函数：
/** * 将 ArrayBuffer 转换为 Base64 编码的字符串。 * @param {ArrayBuffer} buffer 要转换的 ArrayBuffer。 * @returns {string} Base64 编码的字符串。 */function arrayBufferToBase64(buffer) { let binary = ''; const bytes = new Uint8Array(buffer); const len = bytes.byteLength; for (let i = 0; i < len; i += 1) { binary += String.fromCharCode(bytes[i]); } return btoa(binary); // btoa() 函数用于将二进制字符串编码为 Base64}
将上述转换函数集成到fetch响应处理中，即可直接获取Base64编码的图像ZIP数据：
// ... (fetch 请求部分保持不变) ... ).then(async (response) => { if (!response.ok) { const errorText = await response.text(); throw new Error(`API error: ${response.status} - ${errorText}`); } // 获取 ArrayBuffer const arrayBuffer = await response.arrayBuffer(); // 将 ArrayBuffer 转换为 Base64 字符串 const base64Data = arrayBufferToBase64(arrayBuffer); // 在此处处理 base64Data，例如发送给客户端或保存 console.log("Received Base64 data (first 100 chars):", base64Data.substring(0, 100) + "..."); // 如果是在服务器端（如Koa/Express）处理，可以设置响应体 // ctx.status = response.status; // ctx.body = base64Data; return base64Data; }).catch(error => { console.error("Failed to fetch or process image data:", error); throw error; });
注意事项：
btoa()函数只能处理ASCII字符串。如果ArrayBuffer中的字节值超出了ASCII范围，String.fromCharCode()可能会产生非ASCII字符，导致btoa()报错。然而，对于二进制数据（如图片、ZIP文件），String.fromCharCode(byte)通常是安全的，因为它只是将每个字节值映射到对应的Unicode码点，然后btoa再对这个“二进制字符串”进行编码。对于大型文件，直接将整个文件加载到内存并转换为Base64可能会消耗大量内存。在这种情况下，可以考虑使用response.blob()来获取Blob对象，然后利用FileReader进行分块读取或直接创建下载链接。
总结
正确处理API返回的二进制数据是Web开发中的一项基本技能。通过理解fetch API的response.arrayBuffer()方法，我们可以有效地获取原始二进制内容，避免数据损坏。结合arrayBufferToBase64这样的实用工具函数，可以进一步将二进制数据转换为Base64编码，以满足不同的应用场景需求。在与NovelAI等图像生成API交互时，务必记住其返回的是一个名为images.zip的ZIP文件，其中包含image_0.png，因此需要按照二进制文件进行处理。
以上就是JavaScript中处理API返回二进制数据及Base64转换的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538948.html
微信扫一扫 
支付宝扫一扫 
