从 Meta Graph API 中以 base64 形式检索图像

Question

我通过 WhatsApp 上传了一张照片，可以通过以下方式访问：

https://graph.facebook.com/v19.0/{imageId}

请求此API会返回图像的URL：

{
    "url": "https://lookaside.fbsbx.com/whatsapp_business/attachments/?mid={imageId}&ext={ext}&hash={hash}",
    "mime_type": "image/jpeg",
    "sha256": "fd9d5ac5bb84b8a0b7a3402c3a99ed9ff3e9fadb4fa567cd101eaf4923d2b375",
    "file_size": 667836,
    "id": "{imageId}",
    "messaging_product": "whatsapp"
}

然后，通过Postman访问这个URL就成功返回了我上传的图片。

但是，当我使用 Nodejs 时，它返回的内容无法转换为要在浏览器上显示的图像。

const url = (
  await axios.get("https://graph.facebook.com/v19.0/{imageId}", {
    headers: {
      Authorization: `Bearer ${process.env.WHATSAPP_API_KEY}`,
    },
  })
).data.url;
const image = Buffer.from(
  (
    await axios.get(url, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${process.env.WHATSAPP_API_KEY}`,
      },
    })
  ).data
).toString("base64");
console.log(image); // 77+977+977+977+9ABBKRklGAAEBAQBgAGAAAO+...

这会打印一些base64编码的字符串，但是当我在这里测试它时https://base64.guru/converter/decode/image，它告诉该字符串代表一个

application/octet-stream

数据。因此，我无法在 Remix 代码中显示图像。

<img src={`data:image/jpeg;base64,${image}`} /> // not working

如何从 API 中正确检索 Base64 图像？

Answer 1

当使用

axios

发出请求时，您可以通过将

responseType

设置为

text

，并将

responseEncoding

设置为

base64

，告诉它以 Base64 字符串形式获取响应正文（注意它仅适用于 Node.js，请参阅： 请求配置:

试试这个：

const image = (await axios.get(url, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${process.env.WHATSAPP_API_KEY}`,
      },
    responseType: 'text',
    responseEncoding: 'base64'      
    })
  ).data;