Afficher une image à partir de la réponse http avec une image de type de contenu
Disons que j'ai l'url et ne sais pas ce qu'il sera de retour. - Je effectuer l'appel ajax vers cette url avec javascript
et obtenir le contenu. Donc j'ai test c'est le type de contenu et de décider comment afficher la réponse dans ma page web.
Dans le cas où il est json, html ou tout autre texte, j'ai ajouter le contenu au format que j'en ai besoin.
Maintenant, quand le type de contenu de l'image, j'obtiens l'image des données en réponse, ce qui n'est pas encodé en base64. J'ai besoin d'afficher l'image dans une régulière <img>
étiquette bien sûr. Et c'est là où je suis coincé.
Est-il un moyen pour afficher une image à partir des données de contenu?
MODIFIER
Juste pour faire comprendre, entendre, c'est 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`�"
OriginalL'auteur ArVan | 2013-12-26
Vous devez vous connecter pour publier un commentaire.
btoa
travailleront dans ce cas, mais a besoin de l'aideunescape
etencodeURIComponent
pour l'UTF-8.Aimé cette approche. Mais dans mon cas,
btoa
met cette erreur:Uncaught InvalidCharacterError: 'btoa' failed: The string to be encoded contains characters outside of the Latin1 range.
Même quand je neunescape(encodeURIComponent(rawResponse))
. Par la voie,unescape
semble être obsolète.je suis à l'aide de chemin d'accès pour télécharger une image, tandis que les reciving je suis comme ci-dessus des données brutes, mais iam pas en mesure de convertir au format base64 btoa est de donner quelques autres résultat aucune idée pourquoi btoa n'est pas de fournir base64
Est-ce quelque chose de différent pour les jpeg? j'ai la même chose avec un jpeg toutefois, cette méthode ne semble pas fonctionner. Après la conversion de tout cela, je suis parti avec cette drôle icône sur l'interface qui s'affiche lorsque l'image n'est pas là; <img src="data:image/jpg;base64,77+977+977+977+9ABBKRklGAAEBAQBIAEgAAO+/ve+/vRDvv71FeGlmAABNTQAqAAAACAAFARIAawaaaaeaaqaaateaagaaac4aaahwatiaagaaabqaaajvv73vv71paaqaaaabaaai77+977+9HAAHAA....................vv73vv71uM++/vWnvv70R77+9dU/vv71c77+9BADvv70Zbe+/vQTvv71UdO+/ve+/vUXvv73vv71577+9B2t+HWjvv73vv73vv73vv73vv73vv70=">
OriginalL'auteur lostsource
Accepté la réponse n'a pas fonctionné pour moi. Alors, voici ma solution:
fetch
pour télécharger l'image, donc j'ai besoin de lire la réponse queblob
:OriginalL'auteur Karolis Šarapnickis
En fonction de la taille & maquillage de données de l'image, soit:
data:
URI (après avoir fait le codage BASE64 sur le côté client) ou,ArrayBuffer
avec lecanvas
balise pour instancier une image (une fois que vous avez la toile avec de l'image affichée, vous pouvez la laisser comme une toile ou d'exporter l'image d'undata:
URI).Quelques liens utiles:
ArrayBuffer /Convertir ArrayBuffer en Base64
Élément Canvas /L'exportation de la toile à l'image de
:
URILa lecture de "binaire" données renvoyées par AJAX
vous créez un
data:
url à partir des données de l'image. Lire le lien que j'ai fourni. Undata:
url peut se substituer à une url HTTP dans unsrc
attribut.désolé, n'a toujours pas compris. avez-vous vu le modifier j'ai fait l'addition des données?
Oui. Vous obtenez la réponse normale pour un PNG envoyées via un serveur HTTP. Vous avez que dans
xhr.responseText
(ou similaire). Vous pouvez vous adresser à chaque "octet", en tant que binaire. J'ai édité pour ajouter un lien pour l'analyse de "binaire" des données de la Chaîne dansresponseText
. Puis prendre l'une des deux approches que j'ai donné à la transformer en undata:
URL.BTW. Sauf si vous envisagez de quelque chose pour les données... pourquoi ne pas simplement utiliser l'URL que vous avez donné à la requête AJAX comme le
src
attribut de l'image que vous créez via JavaScript (à l'aide denew Image()
)? C'est beaucoup plus facile que la lecture de données binaires et d'essayer de l'utiliser. Il y a raisons pour la lecture des données binaires (e.g: la manipulation de l'image en quelque sorte avant de l'afficher).OriginalL'auteur David-SkyMesh
Je voudrais convertir l'image en base64 à l'aide de toile toDataURL puis l'ajouter à la DOM:
Plus d'informations sur btoa
Je n'ai pas l'url de l'image en frontend, juste le contenu. Je ne suis pas sûr de savoir comment créer une toile avec des données.
Pouvez-vous fournir votre ajax réponse à l'aide de pastebin.com
pastebin.com/qBx50fwz ici, il est
OriginalL'auteur Naz