4

I have a problem to convert binary data to base-64 in JS. I try all the things that exists on the net include this How to parse into base64 string the binary image from response?, but everyone return a wrong base-64 and I don't find why !

**I try this solution Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python but the convert to base-64 not work for me! It's return something wrong .

I get a string binary response from server and I want to convert him to base-64 that I can create a file from him and to show him to user. This is the response I get from server to png picture for example:

�PNG

IHDRrP6�tEXtSoftwareAdobe ImageReadyq�e<�IDATx�b���?�#6��g��T=;��� >č�&g��:��A�@���LX��0�A�T    >[40f��H��>0`B
#��<��0a�+���b�
�o����­o0��~�7��'�xlP����e��.3<x��A�����~�w��$�@90���
`���Ivd�1@c�2���F&�ATM��.�p���[���8��p�]�@,�����pyP��q���pB����u�����3l(6A `@qzK�Q���M�8Q�Ӑ&��1�$(�@� R�81H��P�&P�����ҟ1\��V��3P�d��fp0�#;��ld �yt�(����
J{�М��>>@{!А�3%?@/�
0�O�U,{�9IEND�B`�

Now , I want to take this binary string and to convert him .

For example , the real base 64 of png picture is:

iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaJJREFUeNpi/P//PwO1ACM2wf9njBWAVD0QOwCxApLUAyA+AMSNjCZnH6DoATqKEYtB/UCqgAiHTAAaWIjTMKBB84FUAgk+WwA0MBFmGBOaixJIDKYEqD4wYEIKI7DXHjz/xTBh+SuGD5//YtUNkm+c9Zzhwq1vMKECqH6IN5G9J+h4AWxQgIMAw/oeZQzDFP0uMzx49otBgJeZ4f1+A7h3GYzPJLJAOQEw0fn1CmCFuADIAgVJdmSXMUBjHe4yyhOb8RlGJqBBDlRNtMgu23DgA8PFW98Z9NU4weGGDnDKA10GC7MPQCwAiqnAkrtweVDYGahxwfmgcEKO5fubdYHhxwbTzwAzbAMoNkESIANgGkD0gbOfcXpLgAceURvg6QwIFsITTaQ4UeHTkCaFHOsLMfIkKOxAuCBSDBSGODFIHqYWlgNQ8iZQEBSa+4HYAJHSnzFcuPkdHFagsDNQ52SI9xFmcDDmhQcjEDsC8+cHbBkdZCCxeXQCtCj6gLMIghoKSnvx0JyBnD4+QAN7IdCQAwTLMxwFJQg/QC8Q0Q0DCDAA/k/PVSx73TkAAAAASUVORK5CYII=

When I use any kind of code to convert to base-64 it's return this string :

77+9UE5HDQoaCgAAAA1JSERSAAAAEwAAABMIBgAAAHJQNu+/vQAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHvv71lPAAAAe+/vUlEQVR477+9Yu+/ve+/ve+/vT8D77+9ACM277+977+9Z++/vRXvv71UPRA7AO+/vQLvv73vv70DID4AxI3vv70mZx/vv73vv70BOu+/vRHvv71B77+9QO+/ve+/vQjvv71MABpY77+977+9MO+/vUHvv73vv71UAgk+WwA0MBFmGBPvv73vv70SSAzvv70E77+9PjBgQgoj77+977+9Hjzvv73vv70wYe+/vSvvv70P77+977+9Yu+/vQ3vv71v77+977+977+977+9wq1vMO+/vQLvv71+77+9N++/ve+/vSfvv714AWxQ77+977+9AO+/ve+/vR5lDO+/vRTvv70uMzx477+977+9Qe+/ve+/ve+/ve+/ve+/vX4D77+9dxnvv73vv70k77+9QDkBMO+/ve+/ve+/vQpg77+977+9AO+/vQIFSXZk77+9MUBjHe+/vTLvv70T77+977+9GUYm77+9QQ5UTe+/ve+/vS7vv71w77+9A++/ve+/vVvvv70Z77+977+9OO+/ve+/ve+/vQ5w77+9A10GC++/vQ9ALADvv73vv73vv73vv73vv71weVDvv70Z77+9ce+/ve+/ve+/vXBC77+977+977+977+9de+/ve+/ve+/vQbvv73vv70AM2wDKDZBEiADYBpA9IGzn3F6S++/vQceURvvv73vv70MCBbvv70TTe+/vThR77+905Am77+9HO+/vQsx77+9JCjvv71A77+9IFIMFO+/vTgxSB7vv70W77+9A1Dvv70mUBAU77+977+977+977+9AO+/vdKfMVzvv73vv70dHFbvv73vv70zUO+/vWTvv73vv70RZnAw77+977+9ByMQOwLvv73vv70HbBkdZCDvv715dALvv70o77+977+977+9CO+/vRoKSnvvv73QnO+/ve+/vT4+QAN7IdCQAwTvv70zHAUlCD9ALxDvv70NAwgwAO+/vU/vv71VLHvvv705AAAAAElFTkTvv71CYO+/vQ==

I find this solution for encode to base 64 : https://koding.com/Activity/base64-encoding And now the encode is closer to what need to be but still not help:

/VBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDb9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5cf1lPAAAAf1JREFUeP1i/f39PwP9ACM2/f1n/RX9VD0QOwD9Av39AyA+AA39Jmcf/f0BOv0R/UH9QP39CP1MABpY/f0w/UH9/VQCCT5bADQwEWYYE/39EkgM/QT9PjBgQgoj/f0ePP39MGH9K/0P/f1i/Q39b/39/f2tbzD9Av1+/Tf9/Sf9eAFsUP39AP39HmUM/RT9LjM8eP39Qf39/f39fgP9dxn9/ST9QDkBMP39/Qpg/f0A/QIFSXZk/TFAYx39Mv0T/f0ZRib9QQ5UTf39Lv1w/QP9/Vv9Gf39OP39/Q5w/QNdBgv9D0AsAP39/f39cHlQ/Rn9cf39/XBC/f39/XX9/f0G/f0AM2wDKDZBEiADYBpAx99xekv9Bx5RG/39DAgW/RNN/ThR/dAm/Rz9CzH9JCj9QP0gUgwU/TgxSB79Fv0DUP0mUBAU/f39/QD9nzFc/f0dHFb9/TNQ/WT9/RFmcDD9/QcjEDsC/f0HbBkdZCD9eXQC/Sj9/f0I/RoKSnv9HP39Pj5AA3shEAME/TMcBSUIP0AvEP0NAwgwAP1P/VUse/05AAAAAElFTkT9QmD9

I try also the soultions here:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data without convert to base-64 and with 'arrayBuffer' and 'Blob' objects but the picture didn't show . The only way the picture show it's when I convert to a correct base-64 and then create arraybuffer and initialize Blob with him . But the problem is the same - I cant convert my data to correct base-64.

can anyone save me please ??

Thanks !

Community
  • 1
  • 1
OriEng
  • 1,148
  • 15
  • 31
  • `I get a string binary response from server` - show the code that gets this "string binary" ... does your browser have the `btoa` function? – Jaromanda X Sep 19 '16 at 10:14
  • I mean that the response is binary data but this binary data is in string ( I give an example from response on the question ) . The code is simple 'POST' request from server . Thanks ! – OriEng Sep 19 '16 at 10:18
  • `I give an example from response on the question` - I asked how you got the response, I can see the response you posted. I didn't as that question for giggles, but it may help me give you an answer that wont require some useless bloated library – Jaromanda X Sep 19 '16 at 10:26
  • ( xhr.open("POST", url, true); xhr.setRequestHeader("X-OWA-HeaderLogin-MyDataStores", "**"); xhr.setRequestHeader("json", Json_Dec); xhr.setRequestHeader("Access-Control-Allow-Origin", "*"); xhr.setRequestHeader("Access-Control-Allow-Credentials", true); xhr.onload = function (e) { if (this.status == 200) { .....try to convert it }| ) xhr.send() ; The server just need to get some json and another header . – OriEng Sep 19 '16 at 10:36
  • try adding xhr.responseType = "blob" or "arraybuffer" - then you'll get a blob, or an arraybuffer if you have tools to base64 those formats ... and remove the superfluous "Access-Control-Allow-Origin" header - that's a **response** header, not a **request** header – Jaromanda X Sep 19 '16 at 10:42
  • I try this kind of solution but then when I create a blob var blob = new Blob([xhr.response], { type: 'image/png' }); var urlCreator = window.URL || window.webkitURL; var url = urlCreator.createObjectURL(blob) console.log(url); And then open the url - the image is not display ! I dont know why and because of it the only option that work is base-64 correct.... – OriEng Sep 19 '16 at 10:47
  • so - as I asked, 34 minutes ago, are you using a browser that has the `btoa` function? – Jaromanda X Sep 19 '16 at 10:49
  • I try chrome and IE and there is error message when I try to insert the response to btoa function Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. Thanks! – OriEng Sep 19 '16 at 10:51
  • so what happens with responseType='arrayBuffer' – Jaromanda X Sep 19 '16 at 10:55
  • Possible duplicate of [Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python](http://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de) – Jaromanda X Sep 19 '16 at 10:56
  • see http://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de - there's some javascript code - with responseType='arraybuffer' - as I mentioned earliler – Jaromanda X Sep 19 '16 at 10:56
  • @JaromandaX Thanks for your help first . I try all this kind of solutions but anyone of them not help me . as I say I set responseType='arrayBuffer' and then I get arraybuffer and initialize the blob with him and try to create url - > but then when i open this url it's not show anything – OriEng Sep 19 '16 at 11:17
  • I really look for all the solution exists in google and stack overflow ... but something get wrong when I convert this string that contains this binary data to base-64 . And the option of responseType='arrayBuffer' dosent work . what could be the problem ? tnx!!! – OriEng Sep 19 '16 at 16:17

2 Answers2

0

Here is the link to this small library that is meant can be useful for u. It can convert base64 to binary and vice versa.

Yogender Solanki
  • 62
  • 1
  • 9
0

My problem is solved . I use dropzone plugin to get the response from server and because of this I get binary data as a text reponse and it make my problems. I just go to dropzone.js and change 2 minor things to get the response in type of arraybuffer :

        xhr.responseType = 'arraybuffer'; ( line 1246)

This is new line to get the response in type of arrayBuffer, and then create a Blob object from the arraybuffer response .

          response = xhr.response; (line 1305 )

Change it to get response inseted TextRrsponse..

I hope that it will help somebody... Thanks everyone !

OriEng
  • 1,148
  • 15
  • 31