我有一个PHP脚本,可以将PNG图像编码为Base64字符串。
我想用JavaScript做同样的事情。我知道如何打开文件,但我不知道如何进行编码。我不习惯使用二进制数据。
我有一个PHP脚本,可以将PNG图像编码为Base64字符串。
我想用JavaScript做同样的事情。我知道如何打开文件,但我不知道如何进行编码。我不习惯使用二进制数据。
当前回答
请注意,这不适用于原始的Unicode字符串!请参阅这里的Unicode部分。
编码语法
var encodedData = window.btoa(stringToEncode);
解码语法
var decodedData = window.atob(encodedData);
其他回答
如果你想简单快速地编码base 64,而不考虑可能的兼容性问题,你可以使用turbocommons库。只需下载压缩后的js文件并编写以下代码:
<script src="../yourpathtothelibrary/turbocommons-es5.js"></script>
<script>
var ConversionUtils = org_turbocommons.ConversionUtils;
ConversionUtils.stringToBase64('hello');
</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
对于我的项目,我仍然需要支持IE7和工作大输入编码。
根据Joe Dyndale提出的代码和Marius在评论中提出的建议,可以通过使用数组而不是字符串构造结果来提高IE7的性能。
下面是encode的例子:
var encode = function (input) {
var output = [], chr1, chr2, chr3, enc1, enc2, enc3, enc4, i = 0;
input = _utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output.push(_keyStr.charAt(enc1));
output.push(_keyStr.charAt(enc2));
output.push(_keyStr.charAt(enc3));
output.push(_keyStr.charAt(enc4));
}
return output.join("");
};
我已经手工重写了这些编码和解码方法,除了十六进制的编码方法外,它们都是模块化格式的,以便跨平台/浏览器兼容,并且还具有真正的私有作用域,如果它们由于速度而存在,则使用btoa和atob,而不是利用自己的编码:
https://gist.github.com/Nijikokun/5192472
用法:
base64.encode(/* String */);
base64.decode(/* String */);
utf8.encode(/* String */);
utf8.decode(/* String */);
为了使Base64编码的字符串URL友好,在JavaScript中你可以这样做:
// if this is your Base64 encoded string
var str = 'VGhpcyBpcyBhbiBhd2Vzb21lIHNjcmlwdA==';
// make URL friendly:
str = str.replace(/\+/g, '-').replace(/\//g, '_').replace(/\=+$/, '');
// reverse to original encoding
str = (str + '===').slice(0, str.length + (str.length % 4));
str = str.replace(/-/g, '+').replace(/_/g, '/');
参见这个小提琴:http://jsfiddle.net/magikMaker/7bjaT/
虽然还有一些工作要做,但如果你想要一个高性能的本地解决方案,可以使用一些HTML5函数。
如果你可以把你的数据放到一个Blob中,那么你可以使用FileReader.readAsDataURL()函数来获得一个data:// URL,并砍掉它的前面来获得Base64数据。
你可能必须做进一步的处理,但urldecode数据,因为我不确定是否+字符转义或不为数据:// URL,但这应该是相当微不足道的。