Как преобразовать / декодировать base64 из строки ответа XHR-запроса - PullRequest
Новая
       33

Как преобразовать / декодировать base64 из строки ответа XHR-запроса

0 голосов
/ 25 декабря 2018

Я продолжаю сталкиваться с проблемой правильного преобразования ответа на запрос XHR.Я прочитал несколько решений по Stackoverflow и на некоторых других платформах, но не смог успешно преобразовать строку в dataURL.

Я пытался преобразовать строку в методы atob() и btoa(), упомянутые в MDN и этот Stackoverflow пост.+ Я много погружаюсь, чтобы найти решение в случае утраты различных методов, но ни один из них не нацелился на меня.

Как правильно преобразовать приведенный ниже ответ в 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[�Y׸kkY����=�

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

1 Ответ

0 голосов
/ 25 декабря 2018

Ваши данные XHR - это файл png, как и ожидалось.Чтобы показать вам, как правильно его встраивать, я позволил себе создать «лучший» PNG - желтый квадрат 10х10.он закодирован в base64 в b64data в первой строке фрагмента.Вторая строка устанавливает 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
...