Отображение изображения из http-ответа с типом содержимого изображения

предположим, у меня есть url и не знаю, что он вернет. Я выполняю вызов ajax на этот url с помощью javascript и получить контент. Поэтому я тестирую его тип контента и решаю, как показать ответ на моей веб-странице. Если это json или html или любой другой текст, я добавляю форматированный контент по мере необходимости.

Теперь, когда тип контента-image, я получаю данные изображения в ответ, который не закодирован base64. Мне нужно показать изображение в обычном <img> тег, конечно. И вот где я застрять.

есть ли способ показать изображение из его данных контента?

редактировать

чтобы было ясно, слышу, что я получаю в ответ:

"�PNG


IHDR��Nn�tEXtSoftwareAdobe ImageReadyq�e<fiTXtXML:com.adobe.xmp<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.0-c060 61.134777, 2010/02/12-17:32:00        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmpMM:OriginalDocumentID="xmp.did:8E935AD20E206811822AA1DC23D37A5E" xmpMM:DocumentID="xmp.did:606C15E3DC2311E2A81EB553B5E13CE0" xmpMM:InstanceID="xmp.iid:606C15E2DC2311E2A81EB553B5E13CE0" xmp:CreatorTool="Adobe Photoshop CS5 Macintosh"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:0E49679B0D20681192B0DE3AF6794EF0" stRef:documentID="xmp.did:8E935AD20E206811822AA1DC23D37A5E"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>�,��
3IDATx�읿R�JGI&m�����I����K((MC7�nH����%���ef����0���u�� i%����:�`K�{�ӷ������u�>���(����(����(����(����(����(����(����(����(����(��((��((��((��((��(���&�b1�ϟV��t���j�T*��e��R��t�����c0�&��|}yy����ns�|Cc�l���7k�����ju:�Eٴ����")Ye�
W�U�Mu+"n�����3
����zzz*c��%����K�g4�&�T���z=_����G���@ū�(�Rġ�ng��^������@�F���2G_��],t�Fb:�����^������@٨  ��n�F#�`����|���<��_!��z���,��?�p}��U�����I}���
��h�6N��}||$hIY���p^IR?��
(k*��D�c���)�����s�*l�e�n-}��o��f:��Pְ[.��ʚKdP�be
�!9��,ʺh��!�r����|����>}��o����λW.��#�5�    
�5IY)Zx�'ʚ4�:88��P��̫����P֟Z��玍�czeM�51(()��4����0f�P�03���A�'���Y�5)he�xTʚ�����|��eQ�$�j�jF���~AY�~_������A��`����dOZ�=��f��%�{�}��Qi6�����+U,ʚ4N��E��(�J9^s�m�e� ǜ#bQ6�5�D,��G٘���e��?~��(?h3����*V
��
!��-V*���[ڜ�݉,���v�����2����    �Pְ8�PeQ��d0�g.eM�I�'�����}�
wˠlb�F��|�
8
content-type html httpresponse image javascript

4 ответов

var rawResponse = "�PNG...."; // truncated for example

// convert to Base64
var b64Response = btoa(rawResponse);

// create an image
var outputImg = document.createElement('img');
outputImg.src = 'data:image/png;base64,'+b64Response;

// append it to your page
document.body.appendChild(outputImg);
16

в зависимости от размера и состава данных изображения, либо:

  1. использовать data: URI (после выполнения кодировки BASE64 на стороне клиента) или,
  2. использовать ArrayBuffer вместе с canvas тег для создания экземпляра изображения (как только вы получите холст с отображаемым изображением, вы можете либо оставить его как холст, либо экспортировать изображение в data: URI).

полезные ссылки:

ArrayBuffer / преобразовать Буфер ArrayBuffer в base64

Canvas элемент / экспорт холста в изображение data: URI

чтение "двоичных" данных, возвращаемых AJAX

0

Я бы преобразовал изображение в base64 с помощью canvas toDataURL а затем добавьте его к DOM следующим образом:

var rawResponse = 'PNG'; // This is your response object
var encodedResponse = btoa(rawResponse);

var img = new Image();
var container = document.getElementById('newImg');

img.src = 'data:image/gif;base64,' + encodedResponse;

img.onload = function() {
container.appendChild( img );
};

подробнее о btoa

0

принятый ответ не работает для меня. Итак, вот мое решение:

  1. Я использую fetch чтобы загрузить изображение, поэтому мне нужно прочитать ответ как blob:
let data;
fetch(url).then(response => {
  response.blob().then(blobResponse => {
    data = blobResponse;
  })
});
  1. показывать blob как изображение:
const urlCreator = window.URL || window.webkitURL;
document.getElementById('myImage').src = urlCreator.createObjectURL(data);
0