Disons que j'ai URL et ne sais pas ce qu'il va revenir. J'effectue un appel ajax à cette URL avec javascript
et récupère le contenu. Donc, je teste le type de contenu et décide comment afficher la réponse sur ma page Web. S'il s'agit de texte json, html ou de tout autre texte, j'ajoute le contenu mis en forme selon mes besoins.
Maintenant, lorsque le type de contenu est image, je reçois les données de l'image en réponse, qui ne sont pas codées en base64. Je dois bien sûr afficher l'image dans une balise <img>
normale. Et voici où je suis coincé.
Est-il possible d'afficher une image à partir de ses données de contenu?
MODIFIER
Juste pour que ce soit clair, voici ce que je reçois en réponse:
"�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/VPq!�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`�"
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);
La réponse acceptée n'a pas fonctionné pour moi. Alors voici ma solution:
fetch
pour télécharger l'image, je dois donc lire la réponse sous la forme blob
:let data; fetch(url).then(response => { response.blob().then(blobResponse => { data = blobResponse; }) });
const urlCreator = window.URL || window.webkitURL; document.getElementById('myImage').src = urlCreator.createObjectURL(data);
Je convertirais l'image en base64 en utilisant canvas toDataURL , puis je l'ajouterais au DOM comme suit:
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 );
};
Plus d'informations sur btoa
En fonction de la taille et de la composition des données d'image, vous pouvez soit:
data:
(après avoir effectué le codage BASE64 côté client) ou,ArrayBuffer
avec la balise canvas
pour instancier une image (une fois que vous avez visualisé le canevas avec l'image, vous pouvez le laisser en tant que canevas ou exporter l'image dans un URI data:
).Quelques liens utiles:
ArrayBuffer / Convertir ArrayBuffer en Base64