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,424
  • 18
  • 34
  • `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

3 Answers3

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
  • 72
  • 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,424
  • 18
  • 34
-1

You could try using the turbocommons library. Just download the minified js file (turbocommons-es5.zip) and write the following code:

<script src="../yourpathtothelibrary/turbocommons-es5.js"></script>

<script>
    var ConversionUtils = org_turbocommons.ConversionUtils;

    ConversionUtils.stringToBase64('your binary string here');
</script>

I believe it will work in your case as it is extensively tested, Or you can look at the code on how it is done by the library here:

https://github.com/edertone/TurboCommons/blob/master/TurboCommons-TS/src/main/ts/utils/ConversionUtils.ts

More info here:

https://turboframework.org/en/blog/2022-10-26/encode-decode-base64-strings-javascript-typescript-php

Or you can test it online here:

https://turboframework.org/en/app/stringutils/base64-encode

Jaume Mussons Abad
  • 706
  • 1
  • 6
  • 20
  • the problem he wants to solve is fetching something with ajax (probably with some auth or other method that don't work with regular GET) and display it to the user, base64 is wasteful, nowdays you just create a ObjectURL from a blob... `fetch(req).then(r => r.blob()).then(URL.createObjectURL)` – Endless Oct 28 '22 at 14:01