web-dev-qa-db-ja.com

画像コンテンツタイプを含むHTTP応答の画像を表示する

URLがあり、それが何を返すかわからないとしましょう。 javascriptを使用してそのURLへのajax呼び出しを実行し、コンテンツを取得します。だから私はそれがコンテンツタイプであることをテストし、私のウェブページに応答を表示する方法を決定します。 json、html、またはその他のテキストの場合は、必要に応じてフォーマットされたコンテンツを追加します。

コンテンツタイプが画像の場合、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��|�????�����GٝY/..^^^dl���nU0����hv������������)m�������ec��z�yK�����ְn淳9������=�lT����4�q�'''�E)j��6q��b��:��T�U���F����%�܈M�� � �ْ���,��7�6�6�Ŭ���[ ��!;���7)x�9)�/�����S�*��������i��GAJ�~����jMh*�j�f�Y��UV�k8��G9r�v�^����O����\W 9}^V�q�`(�ʄb)+�9���IVj��k���������K�x�-֊��Z�Pe���h4�L�k�O8[????*3ާ�;�`���b���qAFi�(U��\.�????C�6_�ݮo(�Ri8���`P��k���P�դ&�|?Ǒ#���o=�V��dĵp�K���h�I  N�)%fY�I���Ǡ�LpWq��v"�ʦ��*��4^G4bsn��J7h�^*�z�����{���V�����(+}#����=�$�(+�z!H�><<���SJD�¯e� �Q6��xAxuu%rx�]v)�4�Y%�d�rK���z��x��Q�
:;�h�Iu�mZ�h��bC�������� F���g�וּ�B�AY��lje�Q]Ā\�V�y5ʆ��3�rߔ�x�_qN����� h�W6t�S�<??{????{t��h8�l�ș:�  ��mE��Q�;Y*{��&�`0�x�������(V   f|��Yˆ���qfH�Z��z��i\�S3�LP6�/�� h��nП������>γ?NP6��2LaA/VP؜q!�2�Q6k�U��oWa�(��PK��+��V���(ky�0_�g��fIe����*;����t��A?W\)�qb��մ�lb���*�ex�˦y#�ir\�4��bWs�:9�
]�m�����K��=�瘲�����_�)��K���O�Ќ�R6�x�Ƽ"J���}Q�����)+�^�ymS�������kP��B6蔪�J}���/��٘�+�COo���f�0�1��5OY��{O�ێ����Ӫ1Q6��P�ޔ�䌬ɑc��:�����G�>Gd���0e��{��Уț��L�73LY}�wsO��*��t��p�fe�*�\k�d�f*k5�o�Ԭa�jUx��F9�6G+e�e�R�n*���0��k��10��v6
�$`Vm�_w�v���pm�Y#0��ժ*�T6J-�j��*U��&���Γ���Z�X)kzU`�vyW">�9��|�)��]����F�;�e�E���*(�����ʂg����%�}���,�,��,�,�&���/���Q���0��0e#�0��T*�lZ-�~!�@R��V5l��j���>Em�)p}}mֹ���뫉m=�χá��ׁ���^�g\�e��.b��߿Y$�U% �v:�JX{�up^�8���]��@��_��Z��&��t<o{W��T*1�V���+��OOO��Wr��������L-��������~�kh�J�V��ڏR�]��b�r���1�Bu_�p����zq�W2X$�o�}"�HYYS.��o��S(RK�V+��}\a�7�;�)_���A�d��1#Y$vl�{��ͭ��!���i����T�e�X�
(��((��((��((��((��((��((��((��((��((��(����(����(����(����(��`/�0a�����IEND�B`�"
17
ArVan
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);
20
lostsource

受け入れられた答えは私にとってはうまくいきませんでした。だからここに私の解決策があります:

  1. 画像のダウンロードにfetchを使用しているため、応答をblobとして読み取る必要があります。
let data;
fetch(url).then(response => {
  response.blob().then(blobResponse => {
    data = blobResponse;
  })
});
  1. 表示 画像としてブロブ
const urlCreator = window.URL || window.webkitURL;
document.getElementById('myImage').src = urlCreator.createObjectURL(data);

Canvas toDataURL を使用して画像をbase64に変換し、次のように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
Naz

応答を取得して、HTMLからバインドできます。

1).tsファイルページ:-

imageData : any ;

response => {
    var b64Response = btoa(response);
    this.imageData = 'data:image/png;base64,' + b64Response;
  }

2).htmlファイルページ:

      <img [src]="imageData" class="img-thumbnail">

画像データのサイズと構成に応じて、次のいずれかになります。

  1. data: URIを使用する(クライアント側でBASE64エンコーディングを実行した後)または、
  2. ArrayBuffercanvasタグとともに使用して、イメージをインスタンス化します(イメージが表示されたキャンバスを取得したら、それをキャンバスのままにするか、イメージをdata:にエクスポートできます。 URI)。

役立つリンク:

ArrayBuffer / ArrayBufferをBase64に変換

Canvas要素 / 画像へのキャンバスのエクスポートdata: URI

AJAXから返された「バイナリ」データを読み取る

0
David-SkyMesh