JavaScript转换JPEG二进制数据为图片失败，求解决方法

问题根源 #

你用btoa()直接处理JPEG二进制数据的方式错误。btoa()仅能处理ASCII范围内的字符，而JPEG二进制数据包含大量非ASCII字节，直接将二进制数据转为字符串再用btoa()编码会导致字节损坏，生成的base64字符串无效，因此图片加载失败。

正确处理方法 #

方法1：手动转换Uint8Array为Base64 #

如果你的二进制数据是ArrayBuffer类型，先转为Uint8Array，再通过安全方式编码为Base64：

// 定义Uint8Array转Base64的工具函数
function uint8ToBase64(u8Arr) {
  let str = '';
  u8Arr.forEach(byte => {
    str += String.fromCharCode(byte);
  });
  return btoa(str);
}

// 假设binaryData是从Graph API获取的ArrayBuffer
const u8Array = new Uint8Array(binaryData);
const base64Str = uint8ToBase64(u8Array);

// 创建并插入图片
const img = document.createElement('img');
img.src = `data:image/jpeg;base64,${base64Str}`;
document.body.appendChild(img);

方法2：用FileReader读取Blob（推荐） #

从Microsoft Graph API获取头像时，直接将响应转为Blob，再用FileReader生成Data URL：

// 调用Graph API获取头像
fetch('https://graph.microsoft.com/v1.0/me/photo/$value')
  .then(res => res.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = document.createElement('img');
      img.src = e.target.result; // 直接得到data:image/jpeg;base64,...格式的URL
      document.body.appendChild(img);
    };
    reader.readAsDataURL(blob);
  });

方法3：用Object URL（更高效） #

无需编码Base64，直接通过URL.createObjectURL生成临时URL，性能更优：

fetch('https://graph.microsoft.com/v1.0/me/photo/$value')
  .then(res => res.blob())
  .then(blob => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    // 图片加载完成后释放临时URL，避免内存泄漏
    img.onload = () => URL.revokeObjectURL(img.src);
    document.body.appendChild(img);
  });

验证数据有效性 #

如果以上方法仍无效，先验证二进制数据是否正常：

• 将获取到的二进制数据保存为本地.jpg文件，用图片查看器打开。
• 若能正常打开，说明是前端编码逻辑问题；若无法打开，需检查Microsoft Graph API的请求参数（比如是否请求了正确的尺寸、权限是否足够）。

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