отображать PNG из запроса http get

Я работаю с угловым 4, я использую api, который возвращает изображение с типом контента: img / png

Метод http:

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

Ответ http get (в тексте и в ARC) выглядит так:

?PNG  IHDR??"??W?W??z??|+q%?   ??Y??????M?{??U??H??)L?L?~?6/'6Q??}???:??l'???? ?R?L?&?~Lw??

Я попробовал различные методы для его преобразования и отображения:

  • получать ответ как новый Uint8Array ( ответ ) и преобразовывать его, используя:

      arrayBufferToBase64(buffer) {
      let binary = '';
      let bytes = new Uint8Array(buffer);
      let len = bytes.byteLength;
      for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return window.btoa(binary);
     }
  • Получение изображения как arrayBuffer, а затем его преобразование с использованием:

    fetch

Оба они не работали для меня, и изображение не отображается.

Мой вопрос так, каков реальный формат ответа (blob, arraybuffer или текст) и как его отображать?

javascript,angular,http,

-1

Ответов: 1


1 принят

Вы можете добиться этого, используя blobAPI.

Давайте сначала вернем ответ как a blob. И затем вы можете использовать URL.createObjectURL()для создания файлового объекта.

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

демонстрация

JavaScript, угловатый, HTTP,
Похожие вопросы