如何将WhatsApp API接收的图片二进制数据转换为Data URL？

核心问题分析 #

你当前的代码无效，大概率是因为获取到的response.data并非原始二进制数据——如果请求库（如axios、fetch）默认将响应解析为UTF-8字符串，二进制图片数据会被错误编码，转base64后自然无法还原出有效图片。

解决方案步骤 #

1. 确保请求时获取原始二进制数据 #

不同请求库的配置方式不同，核心是让接口返回ArrayBuffer而非字符串：

• Axios：添加responseType: 'arraybuffer'配置
• Fetch：调用response.arrayBuffer()转换响应

2. 正确生成Data URL #

基于原始二进制数据转换，以下是两种常用库的修正代码：

Axios示例

axios.get('你的WhatsApp图片接口地址', {
  responseType: 'arraybuffer' // 关键配置：获取原始二进制
})
.then(response => {
  // 优先从响应头获取正确的MIME类型，避免硬编码错误
  const mimeType = response.headers['content-type'] || 'image/jpeg';
  const base64Str = Buffer.from(response.data).toString('base64');
  const dataUrl = `data:${mimeType};base64,${base64Str}`;
  
  // 测试：直接插入到页面
  const img = document.createElement('img');
  img.src = dataUrl;
  document.body.appendChild(img);
})
.catch(err => console.error('请求或转换失败:', err));

Fetch示例（浏览器环境）

fetch('你的WhatsApp图片接口地址')
.then(response => {
  // 先确认响应状态正常
  if (!response.ok) throw new Error('图片请求失败');
  // 获取原始二进制并转换为Uint8Array
  return response.arrayBuffer().then(buffer => new Uint8Array(buffer));
})
.then(uint8Arr => {
  const mimeType = 'image/jpeg'; // 或从response.headers.get('content-type')获取
  // 浏览器环境直接用btoa转换
  const base64Str = btoa(String.fromCharCode(...uint8Arr));
  const dataUrl = `data:${mimeType};base64,${base64Str}`;
  
  // 测试展示
  const img = document.createElement('img');
  img.src = dataUrl;
  document.body.appendChild(img);
})
.catch(err => console.error(err));

3. 额外排查点 #

• 验证mimeType正确性：WhatsApp返回的图片可能是image/png而非image/jpeg，可通过响应头content-type确认
• 检查response.data类型：如果打印出来是字符串（乱码），说明请求配置错误，需重新设置响应类型

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