javascript - 如何从 XHR 请求响应字符串转换/解码 base64
问题描述
我一直面临正确转换 XHR 请求响应的问题。我在 Stackoverflow 和其他一些平台上阅读了几个解决方案,但无法成功将字符串转换为 dataURL。
我试图将字符串转换为MDNatob()
和这个Stackoverflow帖子中btoa()
提到的方法。+ 我一直在潜心寻找解决方案,但没有一种方法让我瞄准。
如何正确将此响应转换为 dataURL 以便能够将 URL 设置为image
src
?
XHR 请求响应:
"�PNG
IHDR�� m"H3PLTE���������������������������������������������������?�U�iIDATx�흋�� Eۈ�Z����R�[���BB�]�_�Y�� x��a�a�a�a�a�a�a�a��-��nFI]]�}_x�}�����$ʆ�h�s�_4M_w�WI��*��.o���"��~۔�C^uڟ�P5W�'�[��(��}�=)���U�����Z�J#U��G�'�8G�ۓH�>��E���G�>݁K�ތ4l��C��
v�xu���?�*R��^������ł�B[�YkkY����=�
l|H�s7Yp"���+6zV�cvSj+�
�}�c�c݄Pކ
~�W�N֨(�3����0[QƄ�Q�)o�_R,�]J����G�b��?��M 9� w*h��!=�%"�4������˔*a��
���6��w'��>��el3�e�l����c�ݍ(U.p�Q2�э����#��BɺB�h�4Sh��I�
�s��B���P735���(L�KU_�����s��v�]~�������6�+
/��iD��� �����uԏf�ﳽ�}nA�1_7��t�
+m�2W���P:�8�N�.Ԉ}�KQ�`�G0�P�Y�}�=A|�$� ��Xǭ�)w���>����m�J�R�֖��~}�n�@�G��7�ͽ���d������58C��i�6|�&�ۄ?pIl:P�l *FE�
q��wj��v��6�.�BQ�߁�����GBm�{�(�
�!f�k�Df*?}�+�N��"u��V,N��.eҚj��r�t��А�r��>)��*a��J����4�U���L��Z�/�ҵ���e=�;Qp����=x�[5=N��:8O}��k�?�Rr"�ma��tڱQ�I���R���=ܣU�MI�3Y�6\�~�v�.yJ�)��q�&���/�_�R�A-����{Ҡ�$��RNx%�}'�D�Tm�d9��}�n��~�kz��Ӝ���K� b��] L|�iqo3�O��p��l�� 'd�$�D�!:e��F=����'�"7g�F=b��7+Qܤ֩n�_"��c�����w$~`�V�"��I�{�&R̰G�O�|��%� ��/�L���>� �wb�S����- �3O����*J��7�͈�
�m�JL�Fdҗ��0��>���0��<����0�I!�33,y
d>3Ò�<y��)�'�pxS�E����;�����)�2�p��Dt��P�*�����Y�.�܈�
��D�5�Y�Ld����l��cb�lQ�|4�DED�͒�n
^3��&F!|��D��?�'��q
G�jN�h�\� 2ODVu�d���'���LLs_�ۏ�>CV� �gQ�{���e�
���2��*�Q�>|y��fg�M9a��E�IEND�B`�"
更新:
我已经通过这篇文章成功渲染图像@ https://stackoverflow.com/a/8022521/7163711
解决方案
png
正如预期的那样,您的 XHR 数据是一个文件。为了向您展示如何正确嵌入它,我冒昧地生成了一个“更好”的 PNG - 一个 10x10 的黄色正方形。它b64data
在代码段的第一行进行了 base64 编码。第二行设置yourData
为您将从 XHR 中获得的内容。
var b64data = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mP8/5/hDAMRgHFUIX0VAgBfZRvvtreybgAAAABJRU5ErkJggg==";
// Assuming your data is a raw PNG
var yourData = atob(b64data);
// We convert...
var btoa_data = btoa(yourData);
var elem = document.createElement("img");
elem.src = "data:image/png;base64,"+btoa_data;
document.getElementById("app").append(elem);
console.log(atob(b64data));
<div id="app"></div>
如您所见,btoa()
工作是为了对数据进行 base64 编码;在此之后您唯一需要做的就是在src
您的 img 标签部分中指出:
- 这是一个 PNG(如果不是,或者如果您不确定是否会是,您需要检查回复的前几个字节)
- 它是 base64 编码的
推荐阅读
- python - 列表列表上的 For 循环
- netlogo - 在保持全局方向的同时下坡移动补丁变量
- reactjs - 设置 Plyr 视频播放器以响应 hls
- discord-jda - JDA - 在 GuildMessageReactionAdd / Discord 中获取消息的作者
- database - 为什么数据库用户定义的变量返回null?
- c++ - int 数组正在覆盖另一个 int 数组
- java - 由于使用 Spring Boot RestTemplate 转义了 qoutes 导致的 Graphql 错误请求
- android - java.lang.SecurityException:文档 XXX 不是下载的后代
- reactjs - 如何在 MDX 文件的组件中包含降价内容?
- swift - 如何使我的结构可识别?它有一个唯一的数字 uid 字段