Необработанный отклик изображения / png резонанса - PullRequest
Новая
       53

Необработанный отклик изображения / png резонанса

0 голосов
/ 16 января 2019

Я получаю тело ответа с необработанным ответом, который должен представлять изображение PNG. Мой вопрос заключается в том, как декодировать это и сделать его визуализируемым.

PS: когда я использую почтальон для проверки этого, я понял, что почтальон может обработать эту необработанную строку, и мне интересно, как она это делает.

NPNG

IHDR X: ( pHYs o d IDATx \ WV, JL2b_, ND0 | cmDN6y.q {IӌhsnNcl г ~ /; "vʯm ( '} Q9qP (G: г = д | = _ \ р "" «» «» PW «» «» «» б "" "" "" JPDDDDDA) 8 (В @ ( "" "" "EDDDDDR QP "" "" "" JPDDDDDA) 8 (В @ ( "" "" "EDDDDDR
[...]

1 Ответ

0 голосов
/ 17 января 2019

После нескольких часов поиска в Google, я наконец понял проблему: По сути, ответ на мой вызов REST на самом деле содержит blob тип изображения png. Таким образом, чтобы правильно отобразить его, нам не нужно создавать base64 блоб, вместо этого он изначально поддерживается html5. Проблема, с которой я столкнулся, заключается в том, что этот blob не поддерживается вызовом jQuery ajax, поэтому библиотеки более высокого уровня, такие как 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>
...