显示来自http get请求的PNG

Question

我正在使用 Angular 4，我正在使用返回内容类型为：img/png 的图像的 api

\n\n

http方法：

\n\n

return this.http.get(\'URL\', this.options)\n    .map((res: Response) => res.text());\n// can be also : res.arrayBuffer() // res.blob()\n

\n\n

http get 响应（以文本形式和在 ARC 中）如下所示：

\n\n

\xef\xbf\xbdPNG  IHDR\xef\xbf\xbd\xef\xbf\xbd"\xcd\xb9\xef\xbf\xbdW\xef\xbf\xbdW\xef\xbf\xbd\xef\xbf\xbdz\xd8\xbd\xef\xbf\xbd|+q%\xef\xbf\xbd   \xef\xbf\xbd\xef\xbf\xbdY\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbdM\xe7\xbc\xa5{\xef\xbf\xbd\xef\xbf\xbdU\xef\xbf\xbd\xef\xbf\xbdH\xef\xbf\xbd\xdd\x8f)L\xef\xbf\xbdL\xef\xbf\xbd~\xef\xbf\xbd6/\'6Q\xd7\x8c\xef\xbf\xbd}\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd:\xef\xbf\xbd\xef\xbf\xbdl\'\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd \xef\xbf\xbdR\xef\xbf\xbdL\xef\xbf\xbd&\xef\xbf\xbd~Lw?\xef\xbf\xbd\n

\n\n

我尝试了不同的方法来转换它并显示它：

\n\n

\n

• 获取blob形式的响应并使用以下命令将其转换：

  \n\n

   new Uint8Array(response)\n

\n

• 将图像获取为arrayBuffer，然后使用以下方法将其转换：

  \n\n

    arrayBufferToBase64(buffer) {\n  let binary = \'\';\n  let bytes = new Uint8Array(buffer);\n  let len = bytes.byteLength;\n  for (let i = 0; i < len; i++) {\n    binary += String.fromCharCode(bytes[i]);\n  }\n  return window.btoa(binary);\n }\n

\n

\n\n

它们都不适用于我，并且图像未显示。

\n\n

我的问题是，响应的真正格式是什么（blob、arraybuffer 或文本）以及如何显示它？

\n

Answer 1

您可以使用fetchAPI 来实现此目的。

我们首先将响应作为blob. 然后你可以使用它URL.createObjectURL()来创建一个文件对象。

fetch(URL)
  .then(res=>{return res.blob()})
  .then(blob=>{
    var img = URL.createObjectURL(blob);
    // Do whatever with the img
    document.getElementById('img').setAttribute('src', img);
  })

演示