将二进制数据转换为Base-64 JavaScript

4
我有一个问题,需要在JS中将二进制数据转换为base-64格式。我尝试了网上所有的方法,包括这个如何将二进制图像解析为base64字符串?,但每个方法都返回错误的base-64格式,我不知道为什么!
我尝试了这个解决方案使用JavaScript检索二进制文件内容,对其进行base64编码并使用Python进行反向解码,但是转换为base-64格式对我无效!它返回了错误的结果。
我从服务器获取一个二进制字符串响应,并希望将其转换为base-64格式,以便我可以创建一个文件并向用户显示它。以下是我从服务器获取的PNG图片响应示例:
�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`�

现在,我想把这个二进制字符串转换一下。
例如,png图片的真实base64如下:
iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaJJREFUeNpi/P//PwO1ACM2wf9njBWAVD0QOwCxApLUAyA+AMSNjCZnH6DoATqKEYtB/UCqgAiHTAAaWIjTMKBB84FUAgk+WwA0MBFmGBOaixJIDKYEqD4wYEIKI7DXHjz/xTBh+SuGD5//YtUNkm+c9Zzhwq1vMKECqH6IN5G9J+h4AWxQgIMAw/oeZQzDFP0uMzx49otBgJeZ4f1+A7h3GYzPJLJAOQEw0fn1CmCFuADIAgVJdmSXMUBjHe4yyhOb8RlGJqBBDlRNtMgu23DgA8PFW98Z9NU4weGGDnDKA10GC7MPQCwAiqnAkrtweVDYGahxwfmgcEKO5fubdYHhxwbTzwAzbAMoNkESIANgGkD0gbOfcXpLgAceURvg6QwIFsITTaQ4UeHTkCaFHOsLMfIkKOxAuCBSDBSGODFIHqYWlgNQ8iZQEBSa+4HYAJHSnzFcuPkdHFagsDNQ52SI9xFmcDDmhQcjEDsC8+cHbBkdZCCxeXQCtCj6gLMIghoKSnvx0JyBnD4+QAN7IdCQAwTLMxwFJQg/QC8Q0Q0DCDAA/k/PVSx73TkAAAAASUVORK5CYII=

当我使用任何代码将其转换为base-64时,它都会返回此字符串:
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==

我找到了一种将文本编码为base64的解决方案:https://koding.com/Activity/base64-encoding。现在编码已经接近需要的效果,但仍然不能满足要求。
/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

我也尝试了这里的解决方案:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data,使用'arrayBuffer'和'Blob'对象而不转换为base-64,但图片没有显示。唯一的方法是将其转换为正确的base-64,然后创建数组缓冲区并用它初始化Blob。 但问题依然存在 - 我无法将我的数据转换为正确的base-64。 有人能帮帮我吗?
谢谢!

我的意思是响应是二进制数据,但这个二进制数据是以字符串形式呈现的(我在问题的响应中举了一个例子)。 代码很简单,只是从服务器发出的“POST”请求。 谢谢! - OriEng
我举个例子来回答你的问题 - 我问了你如何得到这个响应,我可以看到你发布的响应。我不是为了好笑而问那个问题,但它可能会帮助我给你一个不需要一些无用臃肿库的答案。 - Jaromanda X
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) { .....尝试转换它 }| ) xhr.send() ;服务器只需要获取一些JSON和另一个标头。 - OriEng
那么当responseType='arrayBuffer'时会发生什么? - Jaromanda X
显示剩余8条评论
3个回答

0

这里是链接到这个小库的地址,它可以将base64转换为二进制,反之亦然,希望对您有所帮助。


谢谢,但是它没有正确转换二进制数据 ): - OriEng
1
你试过这个库吗?我只是复制了这个方法到我的项目中,但它只能将二进制转换为AAAAAAAAA.....谢谢。 - OriEng

0
我的问题已经解决了。我使用了dropzone插件来获取服务器的响应,因此我得到的是二进制数据作为文本响应,这导致了我的问题。我只需要去修改dropzone.js中的两个小细节就可以将响应以arraybuffer类型获取:
        xhr.responseType = 'arraybuffer'; ( line 1246)

这是获取响应类型为arrayBuffer的新行,然后从arraybuffer响应创建Blob对象。

          response = xhr.response; (line 1305 ) 

将其更改为获取响应而不是TextRrsponse。

我希望它能帮助到某些人...谢谢大家!


-1
你可以尝试使用turbocommons库。只需下载压缩后的js文件(turbocommons-es5.zip),并编写以下代码:
<script src="../yourpathtothelibrary/turbocommons-es5.js"></script>

<script>
    var ConversionUtils = org_turbocommons.ConversionUtils;

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

我相信它在你的情况下会起作用,因为它经过了广泛的测试,或者你可以查看这里库中的代码来了解它是如何完成的:

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

更多信息请看这里:

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

或者您可以在此在线测试:

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


他想解决的问题是使用ajax获取某些内容(可能使用一些不适用于常规GET请求的身份验证或其他方法),并将其显示给用户,base64是浪费的,现在你只需要从blob创建ObjectURL... fetch(req).then(r => r.blob()).then(URL.createObjectURL) - Endless

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接