Question

我得到一个带有原始响应的响应正文，该响应正文应该表示一个png图像。我的问题是如何解码并使其可渲染。

PS：当我使用邮递员进行测试时，我意识到邮递员可以呈现此原始字符串，我想知道它是如何做到的。

�PNG

IHDR.X：（pHYs.o.d   IDATx��\�w��v，J.L�2b�_٬�N��d��0|�cmDN�6�y.q。{�Iӌ�hsnNcl�� g〜/;“vʯ�m（（}）Q9��q�P（G：��z= �qq| = _ \\ p。” “”“”“” p.w“”“”“ b   ``''“”“”“J�PDDDDD�A）��8（B�@（”“”“”�EDDDDD��R   P   ``''“”“”“J.PDDDDD�A）��8（B�@（”“”“”EDDDDD��R
  [...]

Answer 1

经过几个小时的搜索，我终于弄清楚了这个问题：本质上，来自我的REST调用的响应实际上包含blob类型的png图像。因此，要正确呈现它，我们不必将blob设置为base64，而是由html5本机支持。我面临的问题是jQuery ajax调用不支持此blob，因此像axios这样的高级库也不支持它。

为简单起见，为了演示其工作原理，我将使用jQuery：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Blob image/png demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<form action="/" id="invokeBlob">
  <input type="submit" value="Invoke It!">
</form>
<!-- the result of the blob will be rendered inside this div -->
<div id="imgcontainer"></div>

<script>
  // Attach a submit handler to the form
  $( "#invokeBlob" ).submit(function( event ) {

    // Stop form from submitting normally
    event.preventDefault();

    var url = "https://YOUR-DOMAIN/charts";
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = "blob";

    xhr.setRequestHeader("Authorization", "Bearer XXX-YOUR-JWT-TOKEN")
    xhr.setRequestHeader("Accept", "image/png");
    xhr.onload = function() {
      if (this.status == 200) {
        var blob = this.response;
        var img = document.createElement("img");
        img.onload = function(e) {
          window.URL.revokeObjectURL(img.src);
        };
        img.src = window.URL.createObjectURL(blob);
        $("#imgcontainer").html(img);
      }
    }
    xhr.send();
  });
</script>

</body>
</html>

图片/ png共振的原始响应

1 个答案: