отображать 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??}???:?'???? ?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,
Похожие вопросы
Яндекс.Метрика