在没有将 responseType 设置为 blob 的情况下使用 XHR 加载图像

Question

我有这种情况，我使用 XMLHttpRequest 加载图像但没有将 responseType 设置为 blob。所以我收到一个字符串

我的问题是，在这种情况下还能渲染图像吗？

例如，我尝试将此字符串转换为 Blob

out = new Blob([imageString],  { type: 'image/png' });

但这并没有呈现预期的图像。有什么建议吗？

DEMO

下面是我的节点后端如何将该图像发送到浏览器

app.get("/binary/*", (req: express.Request, res: express.Response) => {
  const file = binaryPath + '/test.jpg';
  res.sendFile(file);
});

Answer 1

终于明白了：如果你不想xhr.responseType = 'blob'，而你想从收到的数据中创建一个url，那么你需要设置xhr.responseType = 'arraybuffer'。这允许将二进制 xhr.response 转换为 blob，然后创建 URL.createObjectURL.

要点是，当您不将 responseType 设置为二进制类型时，您将获得默认的 xhr.responseType = 'text' 和 utf8 编码。然后 blob 创建失败。

我已将此解决方案包含在您的 stackblitz 中。

在没有将 responseType 设置为 blob 的情况下使用 XHR 加载图像

Loading image with XHR without responseType set to blob

javascript

image

xmlhttprequest