如何在JavaScript中解码展示DreamBooth/Stable Diffusion返回的JPEG图像数据？

你拿到的这个以乱码+JFIF开头的字符串，本质是JPEG二进制数据被错误地以UTF-8文本格式解析后的结果——因为API返回的是image/jpeg二进制流，但请求时可能没指定正确的响应类型，导致运行环境把二进制当成字符串处理了。

下面提供两种解决方案：

方案1：解码已拿到的字符串 #

如果已经获取到了这个字符串，可以按以下步骤恢复并展示图片：

1. 将字符串转换为Uint8Array（二进制字节数组）：

   // 假设responseStr是你从API拿到的超长字符串
   const uint8Array = Uint8Array.from(
     unescape(encodeURIComponent(responseStr)),
     char => char.charCodeAt(0)
   );
   

   这里用encodeURIComponent+unescape的组合，是为了正确还原被UTF-8解析破坏的二进制字节。

2. 将Uint8Array转为Blob对象：

   const jpegBlob = new Blob([uint8Array], { type: 'image/jpeg' });
   

3. 生成图片URL并展示：

   const imgElement = document.createElement('img');
   imgElement.src = URL.createObjectURL(jpegBlob);
   // 将图片添加到页面指定位置，比如body
   document.body.appendChild(imgElement);
   
   // 图片加载完成后释放URL，避免内存泄漏
   imgElement.onload = () => {
     URL.revokeObjectURL(imgElement.src);
   };
   

方案2：优化请求方式（更推荐） #

如果还没发起请求，或者可以修改请求代码，直接指定响应类型为blob或arraybuffer，从根源避免字符串解析的问题：

fetch('https://api-inference.huggingface.co/models/你的DreamBooth模型ID', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer 你的Hugging Face API令牌',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ inputs: '你的提示词' }),
  // 关键：设置响应类型为blob，直接获取二进制Blob
  responseType: 'blob'
})
.then(response => {
  if (!response.ok) throw new Error('请求失败');
  return response.blob();
})
.then(blob => {
  const imgElement = document.createElement('img');
  imgElement.src = URL.createObjectURL(blob);
  document.body.appendChild(imgElement);
  imgElement.onload = () => URL.revokeObjectURL(imgElement.src);
})
.catch(err => console.error('处理失败:', err));

这种方式直接接收API返回的二进制数据，不需要额外解码，效率更高也更可靠。

内容的提问来源于stack exchange，提问作者cormacncheese