3

I keep facing a problem converting XHR request response properly. I've read couple of solutions on Stackoverflow and on some other platforms but couldn't success to convert string to dataURL.

I've tried to convert string to through atob() and btoa() methods mention on MDN and this Stackoverflow post. + I've keep dive much to find a solution within lost of different methods but non of them took me aim.

How can I convert this response below to a dataURL properly to be able set the URL as image src?

XHR Request Response:

    "�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`�"

UPDATE:

I've succeed to render image through this post @ https://stackoverflow.com/a/8022521/7163711

Nuri Engin
  • 813
  • 10
  • 38

1 Answers1

1

Your XHR data is a png file, as expected. In order to show you how to embed it properly, I've taken the liberty of generating a "better" PNG - a 10x10 yellow square. it is base64-encoded in b64data on the first line of the snippet. The second line sets yourData as what you would have gotten from an 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>

As you can see, btoa() works in order to base64-encode data; the only thing you need to do after this is to indicate in the src part of your img tag that:

  • It is a PNG (if it isn't, or if you are not sure if it will be, you'll need to check the first few bytes of your reply)
  • It is base64-encoded
Sébastien Renauld
  • 19,203
  • 2
  • 46
  • 66
  • Thanks for answer. I've setted my response in a variable; `var atob_data = atob(event.target.response);` which is same response on Post but it returns this error then; `Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range.` – Nuri Engin Dec 25 '18 at 13:33
  • @NuriEngin save your script as UTF8 then try again. `atob`/`btoa` are sensitive to the character encoding of the script calling them, and by the looks of it, that's what is biting you right now. – Sébastien Renauld Dec 25 '18 at 13:35
  • 1
    If I got you correct, I've converted with this nested methods which I did before; `var btoa_data = window.btoa(unescape(encodeURIComponent(event.target.response)));`. I'm success to convert but not success to render image to `element`. Here is result on HTML @ https://postimg.cc/cgqQBk4f and Here is element `src` on DevTools @ https://postimg.cc/R31cGQ38 – Nuri Engin Dec 25 '18 at 13:46